@import 'base';

.dropdown {
  display: flex;
}

.dropdown__text {
  display: block;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  width: 80%;
  white-space: nowrap;
}

.dropdown-menu {
  @include _border-radius(0px, 0px, $spacing * 2, $spacing * 2);
  border: none;
  font-weight: 300;
  margin: 0;
  max-height: 300px;
  min-width: 0;
  overflow: auto;
  padding: 0;

  .dropdown-menu__option {
    .button--regular,
    .button--regular:hover,
    .button--regular:focus,
    .button--regular:visited {
      @include _line-height($spacing * 5);
      @include _padding($spacing * 2, $spacing * 3, $spacing * 2, $spacing * 3);
      align-items: center;
      border-bottom: 1px solid $color-button-secondary-border-light;
      color: $color-text-secondary;
      display: flex;
      justify-content: space-between;
      margin: 0;

      .dropdown-menu__option__text {
        font-weight: 600;
        text-decoration: none;
      }

      .glyphicon {
        @include _font-size(18px);
        @include _padding(0px, $spacing * 2, 0px, 0px);
      }
    }

    .button--regular:hover {
      .dropdown-menu__option__text {
        cursor: pointer;
        text-decoration: none;
      }
    }

    &:last-of-type {
      .button--regular {
        border: none;
      }
    }

    .button--primary--general-play:hover,
    .button--primary--general-play:focus {
      background-color: $color-button-primary-action-general-play-hover;
    }

    .button--primary--general-educate:hover,
    .button--primary--general-educate:focus {
      background-color: $color-button-primary-action-general-educate-hover;
    }

    .button--primary--negative:hover,
    .button--primary--negative:focus {
      background-color: $color-button-primary-action-negative-hover;
    }

    .button--primary--navigation:hover,
    .button--primary--navigation:focus {
      background: $color-button-primary-action-navigation-hover;
    }
  }
}

.dropdown-content {
  @include _box-shadow(0px, 8px, 16px, 0px, $color-background-box-shadow);
  @include _margin(54px, 0px, 0px, $spacing * 4);
  background-color: $color-background-secondary;
  display: none;
  position: absolute;
  width: 100%;
  z-index: $hover-content-level;

  a {
    color: $color-text-tertiary;
    display: block;
    padding: 12px 16px;

    small {
      border-bottom: 1px dotted $color-text-tertiary;
      text-decoration: none;
    }
  }

  a:hover {
    small {
      border-bottom: 1px solid $color-text-tertiary;
      text-decoration: none;
    }
  }
}

.dropdown:hover {
  .button--menu--student--active {
    border-bottom: 6px solid $color-button-secondary-border-light;
  }

  .dropdown-content {
    display: block;
  }
}

@media (min-width: $desktop-large-min-width) {
  .menu__right-side {
    align-items: center;
    display: flex;
  }

  .menu__brand {
    margin-left: 19%;

    a {
      align-items: center;
      display: flex;
      height: 100%;
    }
  }
}

@media (min-width: $desktop-small-min-width) and (max-width: $desktop-small-max-width) {
  .menu__brand {
    margin-left: 13%;
  }
}

@media (min-width: $tablet-large-min-width) and (max-width: $tablet-large-max-width) {
  .menu__brand {
    margin-left: 8%;
  }
}

@media (min-width: $tablet-large-min-width) {
  .menu__brand {
    @include _padding($spacing * 2, $spacing * 3, $spacing * 2, $spacing * 3);
    width: 15%;
  }

  .header__account-details-dropdown,
  .header__account-details-dropdown-menu {
    width: 80%;
  }
}

@media (min-width: $tablet-small-min-width) and (max-width: $tablet-small-max-width) {
  .menu__brand {
    @include _padding($spacing * 2, 0px, $spacing * 2, 0px);
    margin-left: 11%;
    width: 15%;
  }

  .header__account-details-dropdown,
  .header__account-details-dropdown-menu {
    width: 100%;
  }
}

@media (min-width: $tablet-small-min-width) and (max-width: $desktop-large-max-width) {
  .menu__right-side {
    align-items: center;
    display: flex;
  }
}

@media (min-width: $tablet-small-min-width) {
  .menu {
    background-color: $color-background-secondary;
    border-bottom: 1px solid $color-background-tertiary;
    display: flex;
    height: $menu-height;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: $nav-bar-level;

    .button--menu {
      border-radius: 0;
    }

    .button--menu--primary {
      @include _padding($spacing * 2, 0px, 16px, 0px);
    }

    .button--menu--secondary {
      @include _padding($spacing * 2, 0px, 18px, 0px);
    }

    .button--menu--enabled {
      color: $color-text-tertiary;
    }

    .button--menu--disabled {
      color: $color-button-disabled;
    }

    .button--secondary--no-border {
      @include _font-size(30px);
      font-weight: 500;
    }

    .button--primary--general-play {
      @include _margin(0px, $spacing * 6, 0px, 0px);
    }
  }

  .menu__brand {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .menu__left-side {
    align-items: flex-end;
    display: flex;
  }

  .button--menu__item,
  .button--menu__item__sub {
    display: none;
  }

  .header__login-options-dropdown-menu {
    width: 100%;
  }
}

.header__ot-logo--no-tagline {
  height: 30px;
}

@media (max-width: $mobile-max-width) {
  .menu {
    height: $menu-height-xs;

    .menu__brand {
      @include _padding($spacing * 3, $spacing * 4, $spacing * 3, $spacing * 4);
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100%;
    }

    .logo {
      @include _padding($spacing, $spacing * 3, $spacing, 0px);
      height: 50px;
      top: initial;
    }

    .header__hamburger {
      margin: auto 0 auto auto;
    }

    button {
      @include _margin($spacing * 3, $spacing, 0px, $spacing);
    }

    .button--menu {
      display: none;
    }
  }

  .menu__right-side {
    display: none;
  }

  .menu__left-side {
    @include _padding(0px, 0px, $spacing * 2, 0px);
    align-items: flex-end;
    display: inline;
  }
}
