/*------------------------------------
  Header Floating
------------------------------------*/

.u-header--floating {
  &:not([class*="u-header--floating-"]) {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: $header-floating-margin-top;
  }
}

[class*="u-header--floating"] {
  &.js-header-fix-moment {
    background-color: $white;
    margin-top: 0;
  }
}

.u-header--floating {
  &.js-header-fix-moment {
    position: fixed;
    border-bottom: 1px solid $header-divider;

    .u-header--floating__inner {
      @include border-radius(0);
    }
  }

  &__inner {
    border-bottom: 0;
    @include border-radius($header-floating-border-radius);
    padding-left: $header-floating-inner-paddingX;
    padding-right: $header-floating-inner-paddingX;
  }
}

// Floating for certain resolutions
/* Small devices */
@include media-breakpoint-up(sm) {
  .u-header--floating-sm {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: $header-floating-margin-top;

    &__inner {
      border-bottom: 0;
      @include border-radius($header-floating-border-radius);
      padding-left: $header-floating-inner-paddingX;
      padding-right: $header-floating-inner-paddingX;
    }

    &.js-header-fix-moment {
      border-bottom: 1px solid $header-divider;

      .u-header--floating-sm__inner {
        @include border-radius(0);
      }
    }
  }
}

@include media-breakpoint-down(xs) {
  .u-header--floating-sm {
    border-bottom: 1px solid $header-divider;

    &__inner {
      border-bottom: 0;
    }
  }
}

/* Medium devices */
@include media-breakpoint-up(md) {
  .u-header--floating-md {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: $header-floating-margin-top;

    &__inner {
      border-bottom: 0;
      @include border-radius($header-floating-border-radius);
      padding-left: $header-floating-inner-paddingX;
      padding-right: $header-floating-inner-paddingX;
    }

    &.js-header-fix-moment {
      border-bottom: 1px solid $header-divider;

      .u-header--floating-md__inner {
        @include border-radius(0);
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .u-header--floating-md {
    border-bottom: 1px solid $header-divider;

    &__inner {
      border-bottom: 0;
    }
  }
}

/* Large devices */
@include media-breakpoint-up(lg) {
  .u-header--floating-lg {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: $header-floating-margin-top;

    &__inner {
      border-bottom: 0;
      @include border-radius($header-floating-border-radius);
      padding-left: $header-floating-inner-paddingX;
      padding-right: $header-floating-inner-paddingX;
    }

    &.js-header-fix-moment {
      border-bottom: 1px solid $header-divider;

      .u-header--floating-lg__inner {
        @include border-radius(0);
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .u-header--floating-lg {
    border-bottom: 1px solid $header-divider;

    &__inner {
      border-bottom: 0;
    }
  }
}

/* Extra Large devices */
@include media-breakpoint-up(xl) {
  .u-header--floating-xl {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: $header-floating-margin-top;

    &__inner {
      border-bottom: 0;
      @include border-radius($header-floating-border-radius);
      padding-left: $header-floating-inner-paddingX;
      padding-right: $header-floating-inner-paddingX;
    }

    &.js-header-fix-moment {
      border-bottom: 1px solid $header-divider;

      .u-header--floating-xl__inner {
        @include border-radius(0);
      }
    }
  }
}

@include media-breakpoint-down(lg) {
  .u-header--floating-xl {
    border-bottom: 1px solid $header-divider;

    &__inner {
      border-bottom: 0;
    }
  }
}

// Long list of links, can lead to a bug, since the header can not calculate the height when.
// For this reason, max-height is given to avoid header disappearing issues on collapse.
.u-header--floating__inner,
.u-header--floating-sm__inner,
.u-header--floating-md__inner,
.u-header--floating-lg__inner,
.u-header--floating-xl__inner {
  max-height: $header-floating-height;

  &.mCS_destroyed {
    position: static !important;
  }
}

[class*="u-header--floating"] {
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    margin: 3.75rem 1.5rem;
  }

  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    height: 70%;
  }

  .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail {
    background-color: transparent !important;
  }
}