// JOA - Actions (Apply, print, share, save)

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

.usajobs-joa-actions {
  @include clearfix();
  margin-bottom: $size-M;
  padding: $size-default $size-default 0;
  text-align: center;
  background-color: $color-gray-lightest;

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

  &__apply {
    @include media($SM) {
      width: 80%;
    }

    @include media($L) {
      width: 100%;
    }
  }

  &__col-apply,
  &__col-sub-actions {
    @include media($M) {
      @include span-columns(3, 6);
    }

    @include media($L) {
      @include span-columns(4, 12);
    }
  }

  &__col-sub-actions {
    @include media($L) {
      min-width: rem(275px);
    }
  }

  &__col-apply {
    @include media($M) {
      float: right;
      @include omega();
    }
  }

  &__col-sub-actions:last-child {
    @include media($M) {
      margin-right: 4.8291579146%;
    }
  }

  &__col-sub-actions &__print,
  &__col-sub-actions &__share,
  &__col-sub-actions &__save {
    @include span-columns(4, 12);
    padding: $size-S 0;
    text-align: center;
    color: $color-base;
    text-decoration: none;

    @include media($M) {
      margin-top: $size-default;
    }

    &:hover {
      text-decoration: none;
    }
  }

  &__col-sub-actions &__print {
    padding-top: $size-S + rem(1px);
  }

  &__col-sub-actions &__share {
    padding: rem(2.5px) 0;
  }

  &__save {
    min-width: rem(73px);

    &::before {
      padding-right: $size-XS;
      color: $color-gold;
      font-size: $base-font-size;
      vertical-align: top;
    }
  }

  &__save[data-state="is-saved"] {
    &::before {
      @include icon-content("job/star", 2.4rem, 2.4rem);
    }
  }

  &__save[data-state="is-unsaved"] {
    &::before {
      @include icon-content("job/star-o", 2.4rem, 2.4rem);
    }
  }
}

.usajobs-joa-actions--v1-5 {
  margin: $size-default 0;

  @include media($M) {
    background-color: $color-white;
  }

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

  &__col-apply,
  &__col-sub-actions {
    @include media($L) {
      float: none;
      width: 100%;
    }
  }

  &__col-sub-actions,
  &__numbers {
    @include row();
  }

  &__numbers {
    @include media($L) {
      margin-top: $size-default;
      border-top: 1px solid $color-gray-lighter;
    }
  }

  &__number-container {
    @include media($SM) {
      @include span-columns(1, 2);
    }

    @include media($M) {
      @include span-columns(3, 6);
    }

    @include media($L) {
      float: none;
      width: 100%;
    }
  }

  &__number {
    margin: 0;
  }
}

.usajobs-joa-actions--pilot {
  display: none;

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

  &__body {
    @include clearfix();
    width: 100%;
  }

  &__apply {
    margin: 0;
    border-radius: 0.25rem;
    font-size: 2rem;
    padding: 1.6rem 2.4rem;
  }

  &__col-sub-actions &__print,
  &__col-sub-actions &__share,
  &__col-sub-actions &__save {
    @include span-columns(4, 12);
    padding: $size-S 0;
    text-align: center;
    color: $color-base;
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }

  &__col-sub-actions &__print {
    padding-top: $size-S + rem(1px);
  }

  &__col-sub-actions &__share {
    padding: rem(2.5px) 0;
  }

  &__save {
    min-width: rem(73px);

    &::before {
      padding-right: $size-XS;
      color: $color-gold;
      font-size: $base-font-size;
      vertical-align: top;
    }
  }

  &__save[data-state="is-saved"] {
    &::before {
      @include icon-content("job/star", 2.4rem, 2.4rem);
    }
  }

  &__save[data-state="is-unsaved"] {
    &::before {
      @include icon-content("job/star-o", 2.4rem, 2.4rem);
    }
  }
}

.usajobs-joa-actions--pilot.is-wide {
  display: block;
  margin-top: $size-L;
  background-color: #eff6fb; // This is blue-5 in the v2 of the Standards

  @include media($L) {
    margin-bottom: $size-M;
  }

  .usajobs-joa-actions--pilot__body {
    padding: $size-default;
    text-align: center;

    @include media($M) {
      text-align: left;
    }

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

  .usajobs-joa-actions--pilot__apply {
    @include media($SM) {
      width: 100%;
      max-width: 28rem;
    }
  }

  .usajobs-joa-actions--pilot__col-apply,
  .usajobs-joa-actions--pilot__col-sub-actions {
    @include media($M) {
      @include span-columns(3, 6);
    }

    @include media($L) {
      @include span-columns(6, 12);
    }
  }

  .usajobs-joa-actions--pilot__col-sub-actions {
    @include media($M) {
      float: right;
      @include omega();
    }

    @include media($XL) {
      min-width: rem(275px);
    }
  }

  .usajobs-joa-actions--pilot__col-sub-actions {
    @include row();
  }
}

.usajobs-joa-actions--pilot.is-narrow {
  margin-top: $size-M;
  padding: 0 $size-default;

  @include media($L) {
    margin-bottom: $size-L;
  }

  @include media($XL) {
    // margin: $size-M auto $size-L;
    max-width: 30rem;
  }

  .usajobs-joa-actions--pilot__apply {
    width: 100%;
    margin-bottom: $size-base;
  }
}

.usajobs-joa-actions-numbers--pilot {
  padding: 0 $size-default;

  &__header {
    font-weight: normal;
  }

  & &__number {
    margin: 0;
  }
}

.usajobs-joa-actions-numbers--pilot.is-wide {
  @include row();

  @include media($L) {
    display: none;
  }

  .usajobs-joa-actions-numbers--pilot__container {
    @include media($SM) {
      @include span-columns(1, 2);
    }

    @include media($M) {
      @include span-columns(3, 6);
    }

    @include media($L) {
      float: none;
      width: 100%;
    }
  }
}

.usajobs-joa-actions-numbers--pilot.is-narrow {
  display: none;

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

  .usajobs-joa-actions-numbers--pilot__header,
  .usajobs-joa-actions-numbers--pilot__number {
    font-size: $small-font-size;
  }

  .usajobs-joa-actions-numbers--pilot__header {
    margin-bottom: 0;
  }
}

.usajobs-joa-actions-share {
  @include actionShare();
}

.usajobs-joa-actions-share--pilot {
  &__item {
    width: 20%;
  }

  &__link {
    font-size: 2.4rem;
  }
}