// Search - Teaser

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

.usajobs-search-teaser {
  background-color: $color-primary-darkest;
  background-repeat: no-repeat;
  background-position: right;

  &__body {
    padding: $size-default $size-M;
  }

  &__title {
    color: $color-primary-alt;
  }

  &__desc {
    display: block;
    max-width: 75%;
  }

  &__link {
    color: $color-white;
  }
}

.usajobs-search-teaser--data-science {
  background-image: url("../img/teasers/data-science.png");
}

.usajobs-search-teaser--cyber-security {
  background-image: url("../img/teasers/cyber-security.png");
}

.usajobs-search-teaser--privacy {
  background-color: $color-gray-lighter;
  background-image: url("../img/teasers/privacy.png");
  background-position: 12% 5%;

  @include media($M) {
    background-position: 95%;
  }

  &__title {
    padding-top: 70px;
    color: $color-base;

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

// This is an override just for the design system instance
.usa-content .usajobs-search-teaser p.usajobs-search-teaser__desc {
  max-width: 75%;
}