.toolbar {
  $component-name: ".toolbar";
  $toolbar-filter-button-content-spacing: -5;
  $toolbar-filter-scroll-fade: -2;
  $toolbar-filter-button-padding-horizontal-default: -3;
  $toolbar-popout-width: 20rem;
  $toolbar-popout-padding: -1;
  $toolbar-popout-padding-vertical-default: 0;
  $toolbar-popout-padding-vertical-low-height: -2;
  $toolbar-popout-margin-right-low-height: 1;

  display: flex;
  justify-content: flex-end;
  position: relative;

  & + *,
  & + .table {
    margin-top: spacing($toolbar-margin-after);
  }

  &__items {
    position: relative; //required for JS when checking for offset childs
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    width: 10em; //required for input fields to be properly hidden when overflowing horizontally

    overflow: hidden;
    height: spacing($toolbar-negative-margin, $times: 2, $add: spacing($button-padding-vertical-small, $times: 2, $add: line-height("single", $include-calc: false)));

    margin: spacing($toolbar-negative-margin, $times: -1);
    padding: spacing($toolbar-negative-margin, $subtract: spacing($toolbar-margin-between-vertical, $times: 0.5)) spacing($toolbar-negative-margin, $subtract: spacing($toolbar-margin-between-horizontal, $times: 0.5));

    //force a wrap if first item in toolbar is too wide for the wiewport #fuckingcleverhack
    &::before {
      content: "";
      display: block;
      height: spacing($button-padding-vertical-small, $times: 2, $add: line-height("single", $include-calc: false));
      margin: spacing($toolbar-margin-between-vertical, $times: 0.5) 0;
    }

    & > * {
      margin: spacing($toolbar-margin-between-vertical, $times: 0.5) spacing($toolbar-margin-between-horizontal, $times: 0.5);
    }

    & > .toolbar__split {
      flex: 1 0 spacing($toolbar-split-width);
      margin: 0;

      &--force-overflow {
        flex-basis: 100%;

        &--not-on-medium {
          @include breakpoint("medium"){
            flex-basis: spacing($toolbar-split-width);
          }
        }

        &--not-on-wide {
          @include breakpoint("wide"){
            flex-basis: spacing($toolbar-split-width);
          }
        }
      }
    }

    & > .button--text {
      margin: spacing($toolbar-margin-between-vertical, $times: 0.5) 0;
    }

    #{$component-name}--center-align-items & {
      justify-content: center;
    }
  }

  &__group {
    display: flex;
    flex-wrap: wrap;

    &--nowrap {
      flex-wrap: nowrap;
    }

    & > * {
      margin: 0 spacing($toolbar-margin-between-horizontal, $times: 0.5);

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

      &:last-child {
        margin-right: 0;
      }
    }

    & > .button {
      align-self: flex-start;
    }

    & > .button--text {
      margin: 0;
    }

    & > .form__field--horizontal {
      margin-right: spacing($toolbar-margin-between-horizontal-checkbox-radio, $subtract: spacing($toolbar-margin-between-horizontal, $times: 0.5));

      &:last-child {
        margin-right: 0;
      }
    }

    & + .form__field--horizontal {
      margin-left: spacing($toolbar-margin-between-horizontal-checkbox-radio, $subtract: spacing($toolbar-margin-between-horizontal, $times: 0.5));
    }
  }

  &__toggle {
    display: none;
    align-self: flex-start;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;

    margin-left: spacing($toolbar-margin-between-horizontal);

    height: spacing($button-padding-vertical-small, $times: 2, $add: line-height("single", $include-calc: false));
    width: spacing($button-padding-vertical-small, $times: 2, $add: line-height("single", $include-calc: false));
    overflow: hidden;

    border-radius: 50%;

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

    @include icon-style {
      flex: 0 0 calc(100% + 1px);
    }

    //only setting the icon, if not set in markup with an icon class
    &:not([class*=icon-]) {
      &::before {
        @include set-icon("context-menu");
      }
    }

    &:hover {
      background-color: color("interactive-hover");
      outline: none;
    }

    &:active {
      outline: none;
      box-shadow: $shadow-style-back color("shadow");
    }

    &:focus-visible {
      outline: $outline-width solid color("utility-focus");
      outline-offset: $outline-offset;
    }  

    #{$component-name}--no-collapse & {
      overflow: visible;
      border-radius: 0;
      width: auto;
      height: auto;
      padding: spacing($button-padding-vertical-small) spacing($toolbar-filter-button-padding-horizontal-default);

      @include breakpoint("medium") {
        padding-left: spacing($button-padding-horizontal-small);
        padding-right: spacing($button-padding-horizontal-small);
      }

      &::before {
        flex: 0 0 auto;
        margin-left: spacing(-5);
        order: 2;
      }

      &__short-label {
        display: inline-block;

        @include breakpoint("medium") {
          display: none;
        }

        & + #{$component-name}__toggle__full-label {
          display: none;

          @include breakpoint("medium") {
            display: inline-block;
          }
        }
      }
    }

    #{$component-name}:not(#{$component-name}--toggled) &--ghost {
      background-color: transparent;
      box-shadow: none;
      color: color("foreground-theme");

      &:hover {
        background-color: transparent;
        box-shadow: $shadow-style-front color("shadow");
      }

      &:active {
        box-shadow: $shadow-style-back color("shadow");
      }
    }
  }

  //don't affect buttons in a popout
  &__items >,
  &__items > .toolbar__group {
    .button {
      padding: spacing($button-padding-vertical-small) spacing($button-padding-horizontal-small);
      white-space: nowrap;

      &--text {
        padding: spacing($button-padding-vertical-small) spacing($button-padding-horizontal-text-small);
      }

      &--icon--hide-label {
        padding: 0;
        width: spacing($button-padding-vertical-small, $times: 2, $add: "#{line-height("single", $include-calc: false)}");
        height: spacing($button-padding-vertical-small, $times: 2, $add: "#{line-height("single", $include-calc: false)}");
      }
    }
  }


  .form__field {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;

    &--inline-label {
      max-width: 16em;

      label {
        padding-top: spacing($button-padding-vertical-small, $subtract: $width-border);
        padding-bottom: spacing($button-padding-vertical-small, $subtract: $width-border);
      }

      &--select {
        label {
          padding-left: spacing(-3);
        }
      }

      & #{$forms-character-input-types},
      & select {
        padding-top: spacing($button-padding-vertical-small, $subtract: $width-border);
        padding-bottom: spacing($button-padding-vertical-small, $subtract: $width-border);
        padding-right: spacing(-3);
      }

      & #{$forms-character-input-types} {
        //height must be forced here, because inputs of type date, number etc. have inline native buttons that otherwise wille make the input too heigh
        height: spacing($button-padding-vertical-small, $times: 2, $add: line-height("single", $include-calc: false), $subtract: $width-border * 2);
      }
    }

    & input[type="checkbox"],
    & input[type="radio"] {
      height: spacing($button-padding-vertical-small, $times: 2, $add: line-height("single"));
      width: spacing($button-padding-vertical-small, $times: 2, $add: line-height("single"));
    }
  }

  .form__inline-submit {
    &__button {
      bottom: 50%;
      transform: translateY(50%);
      right: spacing(-5);
    }
  }

  &__text-item {
    @include set-font(0, "single");
    white-space: nowrap;
    padding: spacing($button-padding-vertical-small) 0;
  }

  &__filter {
    position: relative; //positioning of popover

    &__toggle {
      display: inline-flex;
      position: relative; //must be relative, so that z-index can be set when the toolbar has a popout and the toogle should be above the .toolbar__popout__page-overlay that os
      align-items: baseline;
      @include set-colors("interactive");
      @include set-font(0, "single");
      box-shadow: $shadow-style-center color("shadow");
      padding: spacing($button-padding-vertical-small) spacing($toolbar-filter-button-padding-horizontal-default);
      border: none;
      white-space: nowrap;

      @include breakpoint("medium") {
        padding: spacing($button-padding-vertical-small) spacing($button-padding-horizontal-small);

        @include icon-style {
          @include set-icon("expand");
          line-height: 1;
          //align-self: baseline;
          margin-right: spacing($toolbar-filter-button-content-spacing);
          transform: rotate(0deg);
          transition: transform $animation-timing-expand-flip $easing-in-out;
        }

        &[aria-expanded=true] {
          &::before {
            transform: rotateX(-180deg);
          }
        }
      }

      &:hover {
        background-color: color("interactive-hover");
        outline: none;
      }

      &:active {
        box-shadow: $shadow-style-back color("shadow");
        outline: none;
      }

      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }  

      &[data-count] {
        &::after {
          content: attr(data-count);
          align-self: center;
          @include set-colors("theme");
          @include set-font(-1, "single");
          display: inline-flex;
          align-items: center;
          justify-content: center;
          $size: line-height("single", $fontsize-relative: ("current": -1, "target": 0));
          width: $size;
          height: $size;
          margin-left: spacing($toolbar-filter-button-content-spacing);
          margin-right: spacing(-5, $times: -1);
          border-radius: 50%;
        }
      }
    }

    &__content {

      fieldset {
        border: 0;
        padding: 0;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        margin: 0;
      }

      &__title,
      legend#{$component-name}__filter__content__title {
        @include set-font(1, "single", $weight: "bold");
        z-index: $z-index-pop-over + 2;
        margin-bottom: 0;
        margin-top: 0;

        @include breakpoint("medium") {
          @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
        }

        @include breakpoint("low-height") {
          @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
        }

        & + #{$component-name}__filter__content__search {
          margin-top: spacing(-4);
        }

        & + #{$component-name}__filter__content__options-and-actions {
          margin-top: spacing($toolbar-filter-scroll-fade, $times: -1, $add: spacing(-4));
        }
      }

      &__search {
        //make focus style visible above the fading at the top of the options list, that also have a z-index
        position: relative;
        z-index: $z-index-pop-over + 3;

        .form__field.form__field--inline-label {
          max-width: none;
          width: 100%;
        }
      }

      &__options-and-actions {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
      }

      &__options {
        position: relative; //for positioning of scroll area fades
        flex-grow: 1;

        &::before,
        &::after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          height: spacing($toolbar-filter-scroll-fade);
          z-index: $z-index-pop-over + 1;
        }

        &::before {
          top: 0;
          background-image: linear-gradient(to bottom, color("background") 50%, var(--transparent-background) 100%);
        }

        &::after {
          bottom: 0;
          background-image: linear-gradient(to top, color("background") 50%, var(--transparent-background) 100%);
        }

        &__scroll-container {
          //we need to wrap the scroll-container div arroud the selection-list fieldset, because overscroll-behavior does not work on fieldsets (at least not in Chrome)
          overflow-y: auto;
          scroll-behavior: smooth;
          overscroll-behavior: contain;
          -webkit-overflow-scrolling: touch;

          //make the scroll container span the entire popout and add side paddings, in order to make focus heightlight visible on the sides, due to overflow-x being hidden
          margin-left: spacing($toolbar-popout-padding, $times: -1);
          margin-right: spacing($toolbar-popout-padding, $times: -1);
          padding-left: spacing($toolbar-popout-padding);
          padding-right: spacing($toolbar-popout-padding);

          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;

          @include breakpoint("medium") {
            position: static;

            $num-visible: 6;

            max-height: spacing($toolbar-filter-scroll-fade, $times: 2, $add: "#{spacing(-5)} * #{$num-visible * 2 + 1} + #{line-height("single", $times: $num-visible + 0.5, $include-calc: false)} + (#{spacing(-3)} - #{spacing(-5)}) * #{$num-visible}");
          }

          @include breakpoint("low-height") {
            position: absolute;
            max-height: none;
          }
        }

        .selection-list {
          padding-top: spacing($toolbar-filter-scroll-fade);
          padding-bottom: spacing($toolbar-filter-scroll-fade);
          margin-bottom: 0;

          & legend {
            @include screenreader-only;
          }
        }
      }

      &__actions {
        margin-top: spacing(-1, $subtract: spacing($toolbar-filter-scroll-fade));
      }
    }
  }

  &--has-overflow {
    .toolbar__toggle {
      display: inline-flex;
    }
  }

  &--has-popout {
    &:not(.toolbar--toggled) {
      .toolbar__item--is-overflown {
        display: none;
      }
      .toolbar__items {
        overflow: visible;
      }
    }

    .toolbar__filter__toggle {
      z-index: $z-index-pop-over - 1;
    }
  }

  &__popout {
    position: fixed; //make it fill the entire screen - but also works for positioning og close button, so can't be static
    top: 0;
    left: 0;
    right: 0;
    z-index: $z-index-pop-over;
    background-color: color("overlay");
    -webkit-backdrop-filter: blur($overlay-blur);
    backdrop-filter: blur($overlay-blur);
    height: var(--window-inner-height, 100vh);

    @include breakpoint("medium", $require-low-height: true) {
      position: absolute;
      z-index: auto;
      top: spacing($button-padding-vertical-small, $times: 2, $add: line-height("single", $include-calc: false), $subtract: spacing(-5));
      left: spacing(-4);
      right: unset;
      bottom: unset;
      height: auto;

      background-color: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    &__content {
      position: absolute;
      top: spacing($modal-view-margin-top);
      left: 0;
      right: 0;
      z-index: $z-index-pop-over;
      display: flex;
      flex-direction: column;
      height: spacing($modal-view-margin-top, $times: -1, $add: var(--window-inner-height, 100vh));
      box-shadow: $shadow-style-front color('shadow');
      padding: spacing($toolbar-popout-padding-vertical-default) spacing("side");
      background-color: color('background');

      @include force-scroll-fullscreen-modal;

      @include breakpoint("medium", $require-low-height: true) {
        position: relative;
        top: 0;
        padding: spacing($toolbar-popout-padding);
        width: spacing($toolbar-popout-padding, $times: 2, $add: $toolbar-popout-width);
        height: auto;
      }

      @include breakpoint("low-height") {
        position: fixed;
        top: 0;
        right: spacing($toolbar-popout-margin-right-low-height);
        width: auto;
        height: var(--window-inner-height, 100vh);
        padding: spacing($toolbar-popout-padding-vertical-low-height) spacing("side");
      }
    }

    &__close {
      position: absolute;
      top: spacing($modal-view-margin-top, $add: line-height("single", $times: -0.5, $include-calc: false), $subtract: spacing($button-padding-vertical));
      right: spacing($button-padding-vertical, $times: -1, $add: spacing("side"));
      z-index: $z-index-pop-over + 5;

      @include breakpoint("medium", $require-low-height: true) {
        @include screenreader-only;
      }

      @include breakpoint("low-height") {
        top: spacing($toolbar-popout-padding-vertical-low-height);
        right: spacing($toolbar-popout-margin-right-low-height, $add: line-height("single", $times: -0.5, $include-calc: false), $subtract: spacing($button-padding-vertical));
      }
    }

    &__page-overlay {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: $z-index-pop-over - 2;
    }

    @at-root {
      :root {
        --toolbar-popout-allowed-edge-distance: #{spacing(-1)};
      }
    }

    &[style^="--toolbar-popout-edge-overflow"] {
      transform: translateX(calc(var(--toolbar-popout-edge-overflow)));
    }
  }

  &--fully-overflown {
    .toolbar__toggle {
      order: -1;
      margin-left: 0;
      margin-right: spacing($toolbar-margin-between-horizontal);
    }

    &:not(.toolbar--toggled) .toolbar__toggle {
      @include set-icon("tools", $include-pseudo: "before");
    }
  }

  &__item--is-overflown {
    visibility: hidden;
    opacity: 0;
  }

  &--toggled {
    margin-bottom: spacing($toolbar-margin-bottom-toggled);


    &:not(#{$component-name}--no-collapse) {
      .toolbar__toggle {
        @include set-icon("close", $include-pseudo: "before");
      }
    }

    &#{$component-name}--no-collapse {
      #{$component-name}__toggle {
        display: none;
      }
    }

    .toolbar__items {
      overflow: visible;
      height: auto;

      &::before {
        display: none;
      }
    }

    //setting thos to happen only on direct childs of the toolbar__items, to not affect stuff in toolbar__popout
    #{$component-name}__items > #{$component-name}__item--is-overflown {
      visibility: visible;
      opacity: 1;
      transition: opacity 200ms $easing-in;

      &.toolbar__group {
        width: 100%;
        flex-direction: column;

        &--nowrap {
          width: auto;
          flex-direction: row;

          & > * {
            margin-bottom: 0;
          }
        }

        &:not(.toolbar__group--nowrap) > * {
          margin: 0 0 spacing($toolbar-margin-between-vertical) 0;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      &.button--text:not(.visually-disabled) {
        @include set-colors("interactive");
        box-shadow: $shadow-style-front color("shadow");
        margin: spacing($toolbar-margin-between-vertical, $times: 0.5) spacing($toolbar-margin-between-horizontal, $times: 0.5);

        &:hover {
          background-color: color("interactive-hover");
        }

        &:active {
          box-shadow: $shadow-style-back color("shadow");
        }
      }

      &.button--text {
        &[disabled].visually-disabled {
          background-color: color("background-secondary");
        }
      }

      &.form__field:not(.form__field--horizontal),
      &#{$component-name}__group .form__field:not(.form__field--horizontal) {
        width: 100%;
        max-width: $line-width-max;

        & #{$forms-character-input-types} {
          max-width: none;
          flex-grow: 1;
        }
      }

      &.form__field--horizontal {
        margin: spacing($toolbar-margin-between-vertical, $times: 0.5) spacing($toolbar-margin-between-horizontal, $times: 0.5);
      }

      &.toolbar__split {
        flex: 1 0 100%;
        height: spacing($toolbar-split-height-when-toggled, $subtract: spacing($toolbar-margin-between-vertical));
      }
    }
  }
}