// 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-share {
  @include actionShare();
}