@import '../settings/variables';
@import '../tools/mixins/transition';
@import '../tools/mixins/flex';
@import '../tools/mixins/breakpoints';

.c-top-navigation {
  background-color: $color-background;
  border: 1px solid $color-separator;
  min-height: $mobile-header-item-height;
  position: fixed;
  width: 100%;
  z-index: $layer-content-attached;

  @include media-breakpoint-up(md) {
    position: relative;
    border: none;
    padding-right: none;
    min-height: $header-height;
  }

  &__content {
    @include stretched-start-content();
    flex: 1 1 auto;
    min-height: 3em;
    overflow-x: auto;
    overflow-y: hidden;

    @include media-breakpoint-up(md) {
      @include stretched-centered-content();
    }
  }

  &__logo {
    width: 25px;
    height: 25px;
    margin: 1rem;
    margin-bottom: 0.25rem;

    @include media-breakpoint-up(lg) {
      width: 245px;
      height: 24px;
      margin-bottom: 1rem;
    }

    @include media-breakpoint-up(xl) {
      margin-left: 2rem;
    }
  }

  &__tools {
    min-width: 16.1rem;
    padding-right: $gutter-small;
  }

  &__survey-star-icon {
    font-size: 1.2em;
  }

  &--with-border {
    border-bottom: $hairline solid $color-neutral;
  }
}

.c-top-nav-tab {
  padding: 0 0em;
  &:after {
    content: '';
    margin-top: 0.5em;
    width: 100%;
    display: flex;
    border-bottom: 0.125rem solid transparent;
  }

  &__wrapper {
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.5em;

    &--side-compensation {
      @include media-breakpoint-down(md) {
        margin-right: 57px;
      }
    }
  }

  &__nav-item-height {
    height: $mobile-header-item-height;
  }

  &__nav-item-mobile-menu-height {
    height: 3rem;
  }

  &__navLink {
    display: flex;
    margin: 0.5em 1em 0 0;
    @include media-breakpoint-up(md) {
      margin: 0.5em 1em 0;
    }
  }

  &__navlinkItem {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__notification-indicator {
    background-color: $color-negative;
    border-radius: 50%;
    margin-left: 0.5em;
    display: flex;
    height: 0.5em;
    width: 0.5em;
  }

  &__text {
    display: flex;
    margin-bottom: 0;
    &:hover {
      color: $color-primary;
    }
    &--selected {
      color: $color-primary;
    }
  }

  &--disabled {
    opacity: 0.5;
    cursor: default;
    &:hover {
      color: $color-paragraph-light;
    }
  }

  &--selected {
    @include media-breakpoint-up(md) {
      &:after {
        content: '';
        border-bottom: 0.125rem solid $color-button-active-hover;
      }
    }
  }

  &__mobile-menu-title {
    margin-top: 0.5em;
    &:after {
      content: '';
      padding-top: $gutter-small;
      display: flex;
      border-bottom: 0.125rem solid $color-button-active-hover;
    }
  }

  &__mobile-menu-text {
    color: $color-primary;
  }

  &__mobile-menu-icon {
    margin-top: 0.5em;
    color: $color-primary;
    margin-bottom: 0.5em;
    margin-left: 0.7em;
  }
}