@import "mixins/all";

.toggle-menu {
  background: $light-body;
  border-color: $light-body !important;
  position: relative;
  z-index: 99999;
  text-align: left;

  // For mobile
  margin-bottom: lines(0.5);

  $arrow-width: 1em;

  a, .toggle-menu-item {

    &, .feedback {
      display: block;
      position: relative;
      color: $background;
      padding: lines(0.5);
      padding-right: lines(0.5);
    }

    &.login-form {
      padding: 0;
      &:hover {
        color: lighten($link, 20%);
        background: none;
      }
      &:after {
        content: "";
      }
    }
  }

  a, .toggle-menu-link {
    &:hover {
      background: $link;
      color: $background;

      &:after {
        color: $background;
      }
    }
  }

  .toggle-menu-title {
    @extend .toggle-menu-item;
    background-color: lighten($light-body, 5%);
  }

  p.login-form {
    color: $background;
    margin: lines(0.25) 0 lines(0.5) 0;
  }

  .feedback {
    textarea {
      @include small-type;
      display: block;
      width: 100%;
      height: lines(3, 13);
      padding: lines(0.25, 13);
    }
  }

  &.hidden {
    // Added and removed via JS, to toggle visibility
    display: none;
  }

  .badge {
    position: absolute;
    right: em(9, 13); top: em(14, 13); bottom: auto;
    z-index: 900;

    &.huge-badge {
      top: em(10, 13); right: em(9, 13); bottom: auto;
    }
  }

  @include media(tablet) {
    position: absolute;
  }

}

.toggle {
  display: block;
  cursor: pointer;

  @include media(tablet) {
    display: inline-block;
    width: auto;
  }

  &.toggled {
    background: $light-body;
    color: $background !important;
    border-color: $light-body;

    @include media(tablet) {
      width: auto;
      border-bottom-color: $light-body !important;
    }
  }

  &.with-borders {
    $toggle-border-width: 0;
    border: $toggle-border-width solid $border;
    @include border-radius(em(5));
    background: $highlight;

    &.toggled {
      border-width: 0;
      @include border-radius(0);
      background: $light-body;

      @include media(tablet) {
        // Add padding to fill missing space left by removed borders.
        // No need to do this in mobile, since were not absolutely positioned there.
        padding: $toggle-border-width;
      }

    }

  }
}

.toggle-header {
  display: inline-block;
}

.toggle-header-container {
  @include button-group-button-padding;
  height: $default-button-height;
  line-height: $default-button-line-height;
}

.icon-dropdown {
  @include dropdown-icon-fix;
  float: right;

  @include media(tablet) {
    float: none;
  }
}

.toggle-menu-subitem, a.toggle-menu-subitem {
  padding-left: lines(1);
}