// Glossary
//
// The site drawer
//
// Styleguide components.drawer

// Glossary drawer
// Markup:
// <div class="drawer" id="glossary" aria-hidden="false">
//   <button title="Close glossary"
//       class="button button--close toggle"><label class="sr-only">Close glossary</label><icon class="icon-close-x"></icon>
//   </button>
//   <label for="drawer-search" class="label">Filter glossary terms</label>
//   <input id="drawer-search" type="search" placeholder="e.g. placeholder text">
// </div>
//
// Styleguide components.drawer.drawer



.drawer {
  @include transition(right, 0.3s);

  background-color: $black;
  bottom: 0;
  color: $white;
  max-width: 30rem;
  overflow-y: scroll;
  padding: 2rem;
  padding-bottom: $base-padding-extra;
  position: fixed;
  top: 0;
  width: 300px;
  z-index: 5000;

  h1,
  h2,
  label,
  i {
    color: $white;
  }

  label {
    @include font-size(0.875);
  }

  &[aria-hidden=true],
  &[aria-expanded=false] {
    display: block;
    right: -100%;
  }

  &[aria-hidden=false],
  &[aria-expanded=true] {
    @include transition(right, 0.3s);
    right: 0;
  }

  .button--close {
    @include font-size(1.3);
    background-color: transparent;
    color: $white;
    display: inline-block;
    float: right;
    margin-bottom: (-1 * $base-padding-lite);
    margin-right: (-1 * $base-padding-lite);
    margin-top: (-1 * $base-padding-lite);
    padding: $base-padding-lite;
  }

}

.drawer-icon {
  padding-right: $base-padding-lite;
}

.drawer-header {
  i:before {
    padding-left: 0;
    padding-right: $base-padding-lite;
  }
}

.drawer-search {
  border: none;
  margin-top: 0;

  @include placeholder() {
    color: $gray-light;
    font-style: italic;
  }
}

.drawer-search_form {
  width: 100%;
}

input.drawer-search_field {
  border: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  display: inline;
  font-size: 1rem;
  height: 40px;
  margin-top: 0;
  padding-left: 0.5em;
  width: 86%;
}

.drawer-search_button {
  background-color: $blue-mid;
  border-radius: 0 $base-border-radius $base-border-radius 0;
  color: $blue;
  float: right;
  height: 40px;
  padding: 0.5em;
  position: relative;
  width: 14%;
}
