.horizontal-scroll {
  $component-name: ".horizontal-scroll";
  position: relative;

  & + & {
    margin-top: spacing($horizontal-scroll-spacing-multiple-panels);
  }

  &__scrollable-content {
    @include content-container;
    overflow: hidden;
    overflow-x: scroll;
    scroll-behavior: smooth; //make things scroll instead of just jumping when navigting with keyboard or the .horizontal-scorll__controls buttons.
    position: relative;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0,0,1px); 
    min-width: 10rem;

    /* Hide scrollbar https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */
    &::-webkit-scrollbar {
      display: none; //Chrome, Edge, Safari and Opera
    }
    -ms-overflow-style: none;  // IE
    scrollbar-width: none;  // Firefox

    &:focus {
      & + #{$component-name}__keyboard-instructions {
        @include none-touch {
          display: flex;
        }
      }
    }
    &:focus-visible {
      outline: $outline-width solid color("utility-focus");
      outline-offset: $outline-offset;
    }
  }

  &__header {
    display: flex;
    align-items: end;
    margin-bottom: spacing($horizontal-scroll-header-margin-bottom);

    &__content {
      flex: 1 1 auto;
      display: flex;
      align-items: baseline; //align link and header
      align-items: last baseline; //if the header wraps on multiple lines, the link will align with the last line of the header in browsers that support "last baseline" https://web.dev/last-baseline/
      justify-content: space-between; //spread the link and the header

      @include breakpoint("medium") {
        align-items: end; //when space between header and link becomes wide, we align the link to the scroll panel instead
      }

      @include none-touch {
        justify-content: start; //puts the link next to the heading when scroll buttons are visibile

        @include breakpoint("medium") {
          //on none-touch the link is next to the header, so we keep aligning the the last baseline
          align-items: baseline;
          align-items: last baseline;
        }

        #{$component-name}--no-overflow & {
          align-items: end; //when the panel does not have overflow, the link is pushed to the right, so we align it the the panel instead of the header. May look a bit if the panel is not very wide, so it's a tradeoff
        }
      }

      &__title {
        margin-top: 0;
        margin-bottom: 0;
      }
    }

    .link--arrow {
      flex: 0 0 auto;
      margin-left: spacing(-4);
    }

    &__controls {
      //overwrite default list style
      margin: 0;
      & li {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;

        &::before {
          content: none;
        }
      }

      display: none; // hidden by default on touch devices
      flex: 0 0 auto;
      margin-left: spacing(-4);

      //TODO switch to gap when safari has widespread support
      li {
        flex: 0 0 auto;
        margin-left: spacing(-3);

        &:first-child {
          margin-left: 0;
        }
      }

      //show controls on none-touch devices
      @include none-touch {
        display: flex;
      }
    }
  }

  &__keyboard-instructions {
    display: none;
    position: relative;
    padding-left: spacing(-4);
    padding-right: spacing(-4);
    width: fit-content;

    @include set-colors("background");
    box-shadow: $shadow-style-front color("shadow");

    @include set-font(0, "single");

    @include icon-style {
      @include set-icon("previous");
      margin-right: spacing(-5);
    }

    @include icon-style($position: after) {
      @include set-icon("next");
      margin-left: spacing(-5);
    }
  }

  .page__content__block--no-padding & {
    margin-left: 0;
    margin-right: 0;

    //style for fading when scroll won't go screen edge-to-edge
    &::before,
    &::after {
      content: none;
      position: absolute;
      top: 0;
      bottom: 0;
      width: spacing($page-padding-side);
      z-index: $z-index-above-content;
    }

    &::before {
      left: 0;
      background-image: linear-gradient(to right, color("background") $horizontal-scroll-fade-width, var(--transparent-background) 100%);
    }

    &::after {
      right: 0;
      background-image: linear-gradient(to left, color("background") $horizontal-scroll-fade-width, var(--transparent-background) 100%);
    }

    //show the fade
    @include breakpoint("max-width") {
      &::before,
      &::after {
        content: '';
      }
    }

    //show the fade, when page has sidebar
    .page--sidebar-left &,
    .page--navigation-sidebar-left & {
      @include breakpoint("wide") {
        &::before,
        &::after {
          content: '';
        }
      }
    }


    #{$component-name}__scrollable-content {
      //use display flex to put pseudo elements before and after the comtent to add "padding" that can't be added when panel has overflow
      display: flex;

      //when the content in the panel does not take up all of the width, we need it to stretch to full width
      & > * {
        flex-grow: 1;
      }

      //add spacer to both side of the panel to align content nicely, but allow it to scroll the the edge of the screen
      &::before,
      &::after {
        content: '';
        display: block;
        background-color: transparent;
        width: spacing($page-padding-side);
        flex: 0 0 auto;
      }
    }

    #{$component-name}__header {
      padding-left: spacing("side");
      padding-right: spacing("side");
    }

    #{$component-name}__keyboard-instructions {
      margin-left: spacing($page-padding-side);
      margin-right: spacing($page-padding-side);
    }
  }

  //make .horizontal-scroll__snap-item's scroll-snap to the left edge
  &--snap {
    #{$component-name}__scrollable-content {
      scroll-snap-type: x mandatory;

      #{$component-name}__snap-item {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
      }

      //make snapping align with content, when in a .page__content__block--no-padding
      .page__content__block--no-padding & {
        scroll-padding: 0 spacing("side");
      }
    }
  }

  &--vertical-margin {
    margin-top: spacing(-1);
    margin-bottom: spacing(-1);
  }


  @for $i from 4 through 16 {
    &--min-#{$i * 5} {
      #{$component-name}__scrollable-content > * {
        min-width: $i * 5rem;
      }
    }
  }

  &--no-overflow {
    width: fit-content;

    #{$component-name}__header__controls {
      display: none;
    }

    #{$component-name}__header__content {
      justify-content: space-between;
    }
  }

  &--no-scroll-wide {
    @include breakpoint("wide") {
      width: auto; //overwrites width: fit-content; from &--no-overflow and must be here, because that modifier is added by js when the panel has no overflow due to this modifier

      #{$component-name}__scrollable-content {
        overflow: visible;
        overflow-x: visible;

        & > * {
          min-width: 0;
        }

        &:focus {
          & + #{$component-name}__keyboard-instructions {
            display: none;
          }
        }
      }

      //hide control buttons and move link to right egde
      #{$component-name}__header__controls {
        display: none;
      }

      #{$component-name}__header__content {
        justify-content: space-between;
      }
    }
  }
}