// JOA Layout

@import "../base-shared";

.usajobs-joa {
  .usajobs-joa-summary-title {
    margin-top: 0;
    padding: $size-default $size-default 0;
  }

  // This container is only on the action buttons at the bottom
  // of the page. It is used to push the footer down to leave room
  // for the absolutely positioned agency which is pinned to the bottom
  .usajobs-joa-actions-container {
    margin-top: $size-M;
    padding-bottom: rem(680px);

    @include media($M) {
      padding-bottom: rem(550px);
    }

    @include media($L) {
      padding-bottom: 0;
    }
  }

  .usajobs-content-gutter {
    padding: 0;

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

  .usajobs-content-well {
    margin-bottom: 0;
  }

  .usajobs-joa-agency {
    position: absolute;
    bottom: 0;
    left: $size-default;
    right: $size-default;

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

    @include media($L) {
      position: relative;
      bottom: auto;
      left: auto;
      right: auto;
      margin-bottom: $size-M;
    }
  }

  .usajobs-joa-accordion-title {
    display: none;

    @include media($M) {
      display: block;
    }
  }

  .usajobs-joa-accordion-content {
    a:link {
      display: inline-block;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
  }

  .usajobs-joa-who-may-apply {
    margin: $size-M 0 0 0;
    padding: $size-default;
    background-color: $color-gray-cool-light;

    h3 {
      margin-top: 0;
    }
  }

  .usajobs-joa-agency-container {
    @include span-columns(12, 12);
    padding: $size-M;
  }

  &__authenticity-note {
    display: none;
    font-size: $small-font-size;

    a {
      display: inline-block;
      color: $color-primary;

      &:visited {
        color: $color-primary;
      }
    }
  }

  @include media($M) {
    .usajobs-joa-summary-container {
      @include clearfix();
      width: 100%;
      margin-bottom: $size-M;
      background-color: $color-gray-cool-light;
    }

    .usajobs-joa-summary-col,
    .usajobs-joa-details-col {
      @include span-columns(3, 6);
    }

    .usajobs-joa-details-col {
      @include omega();
    }

    .usajobs-joa-accordion-trigger.is-open-at-M {
      @include hide();
    }

    .usajobs-joa-accordion-content {
      padding-left: $size-default;
      padding-right: $size-default;

      @include media($L) {
        padding-left: 0;
        padding-right: 0;
      }

      &.is-open-at-M {
        @include media($M) {
          padding-top: 0;

          &[aria-hidden="true"] {
            display: block !important;
          }
        }
      }
    }

    .usajobs-joa-accordion-description {
      @include media($L) {
        padding-top: 0;
      }
    }
  }

  @include media($L) {
    .usajobs-joa-actions-container {
      display: none;
    }
  }
}

.usajobs-joa-bground {
  @include media($M) {
    padding-bottom: $size-M;
    background-color: $color-gray-lightest;

    + .usajobs-footer--v2 .usa-footer-return-to-top {
      background-color: $color-gray-lightest;
    }
  }
}

.usajobs-joa--v1-5 {
  &__shell {
    @include media($M) {
      margin-top: $size-M;
      background-color: $color-gray-lightest;
    }
  }

  &__accordion-trigger {
    @include media($M) {
      @include hide();
    }
  }

  &__disclaimer-inset {
    padding: $size-default;
    background-color: $color-cool-blue-light;
    color: $color-white;

    a,
    a:active,
    a:hover,
    a:visited {
      color: $color-white;
    }
  }
}