@import "base";

.sub-nav {
  @include _padding(0px, 20px, 0px, 20px);
  align-items: center;
  display: flex;
  height: 60px;
  justify-content: center;
  text-align: center;
  width: 100%;
  z-index: $nav-bar-level - 1;

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

  .button {
    @include _margin(0px, 16px, 0px, 16px);
  }

  .dropdown {
    .button {
      @include _margin(0px, 1px, 0px, 1px);
    }
  }

  .dropdown-menu {
    width: 100%;
    border: 2px solid $color-button-contained;
    background-color: #fff;

    .dropdown-menu__option {
      .button {
        border-bottom: 1px solid $color-button-contained;
      }
    }
  }

  .button--dropdown {
    background: $color-button-contained;
    border: 2px solid $color-button-contained;
    color: $color-text-primary;
    @include _padding(7px, 12px, 7px, 12px);
  }

  form {
    padding: 0;

    .button {
      margin: 0;
    }
  }

  p {
    @include _padding(0px, 20px, 0px, 20px);
    text-align: left;
  }
}

.sub-nav--hidden {
  display: none;
}

.sub-nav--fixed {
  margin: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: $nav-bar-level + 1;
}

.sub-nav--warning,
.sub-nav--message {
  background-color: $color-background-sub-banner;
  color: $color-text-primary;

  a {
    color: $color-text-primary;
  }

  .button--secondary--dark {
    &:hover,
    &:active,
    &:focus {
      background-color: $color-background-tertiary;
      color: $color-text-secondary;
    }
  }
}

.message--student {
  background-color: $color-tertiary-300;
  color: $color-text-secondary;

  .x-icon {
    color: $color-text-secondary;
  }
}

.sub-nav--warning--fixed {
  margin: 0;
  position: fixed;
  top: $menu-height;
  width: 100%;
  z-index: $nav-bar-level - 1;
}

.sub-nav--message--fixed {
  margin: 0;
  position: fixed;
  top: $menu-height;
  width: 100%;
  z-index: $nav-bar-level - 1;
}

.sub-nav--filler {
  padding-top: 0;
}

.sub-nav--teacher {
  background-color: $color-primary-300;
  color: $color-text-secondary;

  .button:hover,
  .button:focus {
    text-decoration: underline;
    background: none;
  }

  /* Inverted outline button for sub nav bar */
  .active {
    .button,
    .button:hover,
    .button:active,
    .button:focus {
      background-color: $color-background-secondary;
      color: $color-primary-300;
      text-decoration: none;
      cursor: default;
    }
  }

  .sub-nav--icon {
    color: $color-text-secondary;
  }
}

.button.sub-nav--teacher-active,
.button.sub-nav--teacher-active:hover,
.button.sub-nav--teacher-active:active,
.button.sub-nav--teacher-active:focus {
  background-color: $color-background-secondary;
  color: $color-primary-300;
  text-decoration: none;
  cursor: default;
}

.sub-nav--student {
  background-color: $color-tertiary-300;
}

.button.sub-nav--student-active,
.button.sub-nav--student-active:hover,
.button.sub-nav--student-active:active,
.button.sub-nav--student-active:focus {
  background-color: $color-background-secondary;
  color: $color-tertiary-300;
  text-decoration: none;
  cursor: default;
}

.sub-nav--independent {
  background-color: $color-secondary-300;

  .button {
    border-color: #000;
    color: $color-text-primary;
  }
}

.button.sub-nav--independent-active,
.button.sub-nav--independent-active:hover,
.button.sub-nav--independent-active:active,
.button.sub-nav--independent-active:focus {
  background-color: #000;
  color: $color-secondary-300;
  text-decoration: none;
  cursor: default;
}

.sub-nav__content {
  align-items: center;
  display: flex;
  justify-content: space-between;

  .button-group {
    padding: 0;
  }

  p {
    width: 65%;
  }
}

.sub-nav--icon {
  @include _font-size(40px);
  color: $color-text-primary;
}

.success,
.info,
.warning {
  border-bottom: 1px solid $color-message-border;
}

.x-icon {
  @include _font-size(24px);
  text-decoration: none;
  display: flex;

  &:hover,
  &:active,
  &:focus {
    font-weight: normal;
  }
}

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

  .sub-nav--filler {
    @include _padding($menu-height + 60px, 0px, 0px, 0px);
  }
}

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

  .sub-nav--warning--fixed,
  .sub-nav--message--fixed {
    top: $menu-height-xs;
  }

  .sub-nav--filler {
    @include _padding($menu-height-xs + 60px, 0px, 0px, 0px);
  }
}

@media (min-width: $tablet-large-min-width) {
  .sub-nav__content {
    p {
      padding: 0;
    }
  }
}

@media (max-width: $tablet-small-max-width) {
  .sub-nav {
    @include _padding(20px, 20px, 20px, 20px);
    height: auto;
  }

  .sub-nav__content {
    p {
      padding-left: 0;
    }
  }

  .sub-nav--warning--fixed,
  .sub-nav--message--fixed {
    position: static;
  }

  .sub-nav--filler {
    @include _padding(60px, 0px, 0px, 0px);
  }
}

@media (max-width: $mobile-max-width) {
  .sub-nav {
    .container {
      flex-grow: 1;
      padding: 0;
    }
  }
}
