// USAJOBS Drawer

@import "../base-shared";
@import "card/card";

.usajobs-drawers {
  border-bottom: 1px solid $color-gray-lighter;
}

.usajobs-drawers .usajobs-drawer {
  margin-bottom: 0;
  background-color: $color-white;
  border-top: 1px solid $color-gray-lighter;
}

.usajobs-drawer-button {
  font-size: $h4-font-size;
  font-weight: normal;
  background-color: $color-white;
  background-image: url("../img/icons/drawer/minus-circle.svg");
  background-position: 2rem $size-default;
  background-size: 2rem;
  padding: $size-default $size-default $size-base $size-L;
  color: $color-primary;

  &[aria-expanded="false"] {
    background-image: url("../img/icons/drawer/plus-circle.svg");
    background-size: 2rem;
  }

  &:hover {
    background-color: $color-white;
    color: $color-primary-darker;
  }

  &.has-no-face {
    padding-bottom: $size-default;
  }
}

.usajobs-drawer-button--alt-handle {
  background-image: url("../img/icons/drawer/minus.svg");
  background-position: 98% center;
  background-size: $size-default;
  padding: $size-default $size-L $size-base $size-default;

  &[aria-expanded="false"] {
    background-image: url("../img/icons/drawer/plus.svg");
    background-size: $size-default;
  }

  &.has-no-face {
    padding-bottom: $size-default;
  }
}

.usajobs-drawer-button--with-icon {
  display: flex;
  align-items: center;
  line-height: $base-line-height;

  &__figure {
    flex-shrink: 0;
    padding-right: $size-S;

    @include media($L) {
      padding-right: $size-default;
    }

    svg {
      width: rem(44px);
      height: rem(44px);
      vertical-align: middle;
    }
  }

  &__button-text {
    flex: 1;
    min-width: 0;
  }
}

.usajobs-drawer-face {
  background-color: $color-white;
  margin: 0;
  padding-left: $size-L;
  padding-bottom: $size-default;

  dt {
    font-weight: bold;
  }

  dd {
    margin: 0;
  }
}

.usajobs-drawers .usajobs-drawer-content {
  background-color: $color-white;
  overflow: auto;
  padding: $size-default $size-M $size-M $size-L;
  border: 0;
  @include boxShadow(2, true);

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }

  &__list {
    @include unstyledList();

    @include media($M) {
      padding-bottom: $size-default;
    }

    p,
    dd {
      margin: 0;
    }
  }

  &__item-label {
    margin-top: $size-default;
    margin-bottom: 0;
    font-size: 1.5rem; // Matching JOA label header size
    font-weight: normal;
    color: $color-gray;
  }

  &__item-content {
    margin-top: 0; // For content that appears outside of a list
  }

  .usajobs-grid,
  .usa-grid {
    padding: 0; // get rid of outer padding we don't need given that we're already in a padded drawer
  }
}

.usajobs-drawers .usajobs-drawer-content--with-icon {
  // Doesn't try to align the contents with the size of the icon
  padding: $size-default;

  @include media($M) {
    padding: $size-M;
  }
}