@layer block {
  /* stylelint-disable no-descending-specificity */
  /* stylelint-disable comment-empty-line-before */
  .overflow-scroll {
    position: relative;
  }

  main > .section.overflow-scroll.background-bleed .slide-wrapper {
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  .overflow-scroll ul {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 auto;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    gap: 1rem;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .overflow-scroll ul::-webkit-scrollbar {
    display: none;
  }

  .overflow-scroll ul > * {
    flex: 1 0 100%;
    scroll-snap-align: center;
    box-sizing: border-box;
  }

  .overflow-scroll
    ul
    :is(.fragment-wrapper, .section, .slide-wrapper, .slide.overlay) {
    height: 100%;
  }

  .overflow-scroll ul img {
    display: block;
  }

  @media (max-width: 639px) {
    .overflow-scroll .slide.overlay .mobile-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* dots */
  .overflow-scroll .pagination-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gutter-xs);
  }

  .overflow-scroll .pagination-dots .dot {
    width: 3.5rem;
    height: 3.5rem;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .overflow-scroll .pagination-dots .dot::after {
    content: '';
    width: var(--gutter-s);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--clr-med-grey);
  }

  .overflow-scroll .pagination-dots .dot.active::after {
    background: var(--clr-charcoal);
  }

  .overflow-scroll .controls-wrapper > button {
    padding: 0;
  }

  /* play/pause button */
  .overflow-scroll .controls-wrapper > button.play-pause-button {
    position: absolute;
    z-index: 200;
    bottom: var(--gutter-m);
    left: var(--gutter-s);
    background: #f2eff899;
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4.4rem;
    aspect-ratio: 1/1;
    padding: 0;
    margin: 0;
  }

  .overflow-scroll.play-btn-right .controls-wrapper > button.play-pause-button {
    left: unset;
    right: var(--gutter-s);
  }

  .overflow-scroll
    .controls-wrapper
    > button.play-pause-button:is(:hover, :focus-visible) {
    background: var(--clr-white);
  }

  .overflow-scroll .controls-wrapper .play-pause-button::after {
    content: '';
    display: block;
    width: 2rem;
    aspect-ratio: 1/1;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 45 59"><polygon points="0.64,0 0.64,59 44.72,29.5 "></polygon></svg>')
      center/contain no-repeat;
    transition: 0.1s all ease;
    cursor: pointer;
    border: none;
  }

  .overflow-scroll .controls-wrapper .play-pause-button.playing::after {
    content: '';
    display: block;
    width: 0;
    height: 1.8rem;
    border-color: transparent transparent transparent var(--clr-brand-black);
    border-style: double;
    border-width: 0 0 0 1.6rem;
  }

  .overflow-scroll .controls-wrapper button:focus-visible {
    outline: var(--focus-ring);
  }

  /* champion */
  /* ==================================================================================================== */
  .overflow-scroll.chp .controls-wrapper > button:not(.play-pause-button) {
    position: absolute;
    top: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 4rem;
    border-radius: 0;
    background: transparent;
    display: grid;
  }

  .overflow-scroll.chp .controls-wrapper > button.prev {
    left: 0;
    justify-content: end;
  }

  .overflow-scroll.chp .controls-wrapper > button.prev::before {
    rotate: 180deg;
  }

  .overflow-scroll.chp .controls-wrapper > button.next {
    right: 0;
    justify-content: start;
  }

  .overflow-scroll.chp
    .controls-wrapper
    > button:not(.play-pause-button)::before {
    content: '';
    display: block;
    background: url('../../icons/arrow-thick.svg') 55% 50%/35% no-repeat;
    height: 2.6rem;
    aspect-ratio: 1/1;
    grid-area: 1/1;
    z-index: 2;
  }

  .overflow-scroll.chp
    .controls-wrapper
    > button:not(.play-pause-button)::after {
    grid-area: 1/1;
    content: '';
    background: var(--clr-white);
    display: block;
    height: 2.6rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    opacity: 0.5;
  }

  .overflow-scroll.chp
    .controls-wrapper
    > button:is(:hover, :focus-visible)::after {
    opacity: 1;
  }

  .overflow-scroll.chp .controls-wrapper > button.disabled {
    display: none;
  }

  .overflow-scroll.chp .controls-wrapper .pagination-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .overflow-scroll.chp .pagination-dots .dot.active::after {
    background: var(--clr-brand-primary);
  }

  /* Hanes */
  /* ==================================================================================================== */
  .overflow-scroll.hns .controls-wrapper {
    padding-inline: var(--gutter-m);
    display: grid;
    grid-template:
      'prev dots next'
      / 5rem auto 5rem;
  }

  .overflow-scroll.hns button.prev {
    grid-area: prev;
  }

  .overflow-scroll.hns div.pagination-dots {
    grid-area: dots;
  }

  .overflow-scroll.hns button.next {
    grid-area: next;
  }

  .overflow-scroll.hns button.play-pause-button {
    position: absolute;
    bottom: var(--gutter-m);
    left: var(--gutter-m);
    transform: translateY(-100%);
  }

  .overflow-scroll.hns :is(button.next, button.prev) {
    background: transparent;
    margin: 0;
  }

  .overflow-scroll.hns :is(button.next, button.prev).disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  .overflow-scroll.hns :is(button.next, button.prev)::after {
    content: '';
    background: url('/icons/arrow-long.svg') center/90% no-repeat;
    display: block;
    height: 2rem;
    aspect-ratio: 2.5/1;
    opacity: 0.7;
  }

  .overflow-scroll.hns
    :is(button.next, button.prev):is(:hover, :focus-visible)::after {
    opacity: 1;
  }

  .overflow-scroll.hns button.next::after {
    transform: rotateZ(180deg);
  }

  .overflow-scroll.hns .pagination-dots .dot::after {
    width: var(--gutter-12);
  }

  .overflow-scroll.hns .slide {
    /* max-width: 185rem; */
    margin-inline: auto;
  }

  /* maidenform */
  /* ====================================================================================================== */
  .overflow-scroll.mdf .controls-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0 0;
    position: relative;
    height: auto;
  }

  .overflow-scroll.mdf:where(.no-section-padding, .no-inline-padding, .full)
    .controls-wrapper {
    padding-inline: 1.6rem;
  }

  .overflow-scroll.mdf .controls-wrapper > button:not(.play-pause-button) {
    height: 4.4rem;
    width: 4.4rem;
    background: transparent !important;
    border-radius: 0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .overflow-scroll.mdf
    .controls-wrapper
    > button:not(.play-pause-button)::after {
    content: '';
    background: url('../../icons/arrow-long.svg') center/contain no-repeat;
    display: block;
    height: 2rem;
    aspect-ratio: 2/1;
  }

  .overflow-scroll.mdf .controls-wrapper > button.prev {
    order: 1;
  }

  .overflow-scroll.mdf .controls-wrapper .pagination-dots {
    order: 2;
  }

  .overflow-scroll.mdf .controls-wrapper > button.next {
    order: 3;
  }

  .overflow-scroll.mdf .controls-wrapper > button.next::after {
    rotate: 180deg;
  }

  .overflow-scroll.mdf.controls-white
    .controls-wrapper
    > button:not(.play-pause-button) {
    fill: white;
  }

  .overflow-scroll.mdf .controls-wrapper > button.disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .overflow-scroll.mdf.controls-white .pagination-dots .dot {
    background-color: var(--clr-grey);
    border: 1px solid var(--clr-charcoal);
  }

  .overflow-scroll.mdf.controls-white .pagination-dots .dot.active {
    background: var(--clr-white);
  }
}