// Layouts: Design System Home

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

.usajobs-ds-home {
  .usajobs-permalink {
    @include permaLink();
  }
}

.usajobs-ds-home-banner,
.usajobs-ds-home-banner--research {
  &__body {
    @include contentGutter();
    max-width: $site-max-width;
    margin-left: auto;
    margin-right: auto;
    padding-top: $size-M;
    padding-bottom: $size-M;
  }

  &__title,
  &__desc {
    color: $color-white;
    text-align: center;
  }

  &__desc {
    font-size: $h3-font-size;
  }

  &__actions {
    width: 100%;
    text-align: center;
  }
}

.usajobs-ds-home-banner {
  background-color: $color-primary-darker;

  &__actions {
    @include unstyledList();

    li {
      display: inline-block;
    }
  }
}

.usajobs-ds-home-banner--research {
  background-color: $color-primary-darkest;
}

$pillar-icon-width: rem(68px);
$pillar-body-padding: $size-default;

.usajobs-ds-home-research-pillars {
  @include contentGutter();

  &__list {
    @include unstyledList();
    width: 100%;

    .usajobs-ds-home-research-pillars__pillar {
      display: inline-block;
      width: 100%;

      @include media($M) {
        @include span-columns(3, 6);
        min-height: rem(225px);
      }

      &:nth-child(2n) {
        @include media($M) {
          @include omega();
        }
      }
    }
  }

  &__description {
    margin-bottom: $size-L;
  }

  &__body {
    padding: 0 $pillar-body-padding $pillar-body-padding;
  }

  &__icon .svg-inline--fa {
    display: inline-block;
    font-size: $pillar-icon-width;
    text-align: center;
  }

  &__icon.p1 .fa-compass {
    color: $color-secondary-darkest;
  }

  &__icon.p2 .fa-compass {
    color: $color-primary-alt;
  }

  &__icon.p3 .fa-compass {
    color: $color-green;
  }

  &__icon.p4 .fa-compass {
    color: $color-gold;
  }

  &__icon.p5 .fa-compass {
    color: $color-primary;
  }

  &__icon.p6 .fa-compass {
    color: $color-primary-darkest;
  }

  &__pillar-title {
    margin-top: 0;
    text-transform: uppercase;
  }
}

.no-flexbox .usajobs-ds-home-research-pillars {
  $icon-padding: $size-default;

  &__pillar {
    @include clearfix();
    display: table;
  }

  &__figure,
  &__body {
    display: table-cell;
  }

  &__body {
    @include calc(
      width,
      "100% - "
        ($pillar-icon-width + $icon-padding + ($pillar-body-padding * 2))
    );

    .lt-ie9 & {
      width: 75%;
    }
  }
}

.flexbox .usajobs-ds-home-research-pillars {
  &__pillar {
    display: flex;
    align-items: flex-start;
  }

  &__figure {
    flex-shrink: 0;
  }

  &__body {
    flex: 1;
    min-width: 0;
  }
}