@import "base";

.dropdown {
  display: flex;

  &.header__account-details-dropdown {
    justify-content: flex-end;
    height: 48px;
  }

  > .button--menu--enabled:hover {
    text-decoration: none;
  }
}

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

  .button--header--login > & {
    overflow: visible;
  }
}

.dropdown-menu {
  @include _border-radius(0px, 0px, 0px, 0px);
  border: 2px solid $color-secondary-600;
  border-top: 0;
  font-weight: 300;
  margin: 0;
  max-height: 300px;
  min-width: 0;
  overflow: auto;
  padding: 0;

  a {
    text-decoration: none;
  }

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

      .dropdown-menu__option__text {
        padding: 0;
        text-decoration: none;
      }

      &.disabled,
      &.disabled:hover,
      &.disabled:focus,
      &.disabled:visited {
        color: $color-text-disabled;
        cursor: default;
        text-decoration: none;

        .dropdown-menu__option__text {
          cursor: default;
          text-decoration: none;
        }
      }

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

    .button--regular {
      @include _padding($spacing * 2, $spacing * 3, $spacing * 2, $spacing * 3);
    }

    .button--regular:hover,
    .button--small:hover {
      .dropdown-menu__option__text {
        cursor: pointer;
        text-decoration: underline;
      }
    }

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

  &.header__account-details-dropdown-menu {
    left: auto;
    right: 0;
  }
}

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

  svg {
    opacity: 0.5;
    margin-left: 0.3rem;
  }

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

  a:hover {
    text-decoration: none;
    small {
      font-weight: 400;
      text-decoration: underline;
    }
  }
}

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

  .dropdown-content {
    display: block;
  }
}

.button--dropdown {
  &.header__account-details-dropdown {
    justify-content: space-between;

    &::after {
      content: "\e8a6";
    }
  }
}

.menu {
  box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.1);

  .material-icons-outlined.md-32 {
    @include _font_size(32px);
  }

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

  button,
  .dropdown-menu {
    max-width: 350px;
  }

  .menu--title {
    @include _font-size(27px);
    @include _margin(0px, 40px, 0px, 10px);
    color: $color-text-tertiary;
    font-family: "Space Grotesk", sans-serif;
  }
}

@media (min-width: $tablet-large-min-width) {
  .header__account-details-dropdown,
  .header__account-details-dropdown-menu {
    min-width: 190px;
    width: 80%;
    background: transparent;
  }
}

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

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

@media (min-width: $tablet-small-min-width) {
  .menu__right-side {
    align-items: center;
    justify-content: flex-end;
    display: flex;
  }
}

@media (min-width: $desktop-small-min-width) {
  .menu {
    height: $menu-height;

    .logo {
      height: 100px;
    }

    .menu__brand {
      @include _margin(0px, $spacing * 7, 0px, 0px);
    }

    .menu__brand--ocado {
      img {
        height: 52px;
      }
    }
  }
}

@media (min-width: $tablet-small-min-width) and (max-width: $tablet-large-max-width) {
  .menu {
    height: $menu-height-xs;

    .logo {
      @include _padding($spacing * 3, $spacing * 9, $spacing * 3, $spacing * 3);
    }

    .menu__brand--ocado {
      img {
        height: 42px;
      }
    }
  }
}

@media (min-width: $tablet-large-min-width) {
  .menu {
    background-color: $color-background-secondary;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: $nav-bar-level;

    .button--menu:hover,
    .button--menu:focus, {
      font-weight: normal;
    }

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

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

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

    .button--register {
      @include _margin(0px, $spacing * 6, 0px, 0px);
      justify-content: center;
    }

    .button--register,
    .button--header--login {
      @include _padding(10px, 15px, 10px, 15px);
      width: 155px;
      height: 45px;
    }
  }

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

    img {
      max-width: none;
    }
  }

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

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

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

@media (max-width: $tablet-small-max-width) {
  .menu {
    .menu__brand {
      @include _padding($spacing * 3, $spacing * 4, $spacing * 3, $spacing * 4);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 100%;

      .menu__brand--ocado {
        margin-right: 33px; // align Ocado logo to the middle of the screen
      }
    }

    .logo {
      padding: 0;
    }

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

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

  .menu__right-side {
    display: none;
  }

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

  #menu-items {
    button,
    .button {
      @include _padding(0px, $spacing * 3, 0px, $spacing * 3);
      max-width: none;

      &.button--header--login {
        padding-left: calculate-rem($spacing * 4);
      }

      &.button--menu__item__sub {
        padding-left: calculate-rem($spacing * 6);
      }

      &.button--menu__item__sub__sub {
        padding-left: calculate-rem($spacing * 10);
      }
    }

    #login-tabs > .button {
      padding-left: calculate-rem($spacing * 2);
    }
  }
}

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

    .menu__brand--ocado {
      img {
        height: 42px;
      }
    }
  }
}
