18F/18f.gsa.gov

// Buttons
// ==========================

.usa-button,
.usa-button:visited,
button,
[type='button'],
[type='submit'],
[type='reset'],
[type='image'] {
  background-color: $color-medium;
  font-family: $font-sans;
  width: auto;

  &:hover {
    background-color: $color-medium-hover;
  }

  &.usa-button-secondary,
  &.usa-button-secondary:visited {
    background-color: $color-bright;
    color: $color-black;

    &:hover {
      background-color: $color-bright-hover;
    }
  }
}

.usa-button-marginless {
  margin: 0;
}

%link-arrow {
  font-weight: $theme-font-weight-bold;
  font-size: $theme-small-font-size;
  text-decoration: none;
}

@mixin display-icon($icon, $direction, $size) {
  &:#{$direction} {
    background-image: url('../img/#{$icon}.png');
    background-image: url('../img/#{$icon}.svg');
    background-size: 100%;
    content: '';
    display: inline-block;
    height: $size;
    margin-bottom: -1px;
    width: $size;

    @if $direction == 'after' {
      margin-left: 4px;
    } @else {
      margin-right: 4px;
    }
  }

  &:hover::#{$direction} {
    background-image: url('../img/#{$icon}-hover.png');
    background-image: url('../img/#{$icon}-hover.svg');
  }

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

  &:hover {
    color: $color-medium-hover;
  }
}

@mixin display-arrow($direction: 'right', $color: $color-medium) {
  svg {
    display: inline-block;
    height: 1.2rem;
    margin-bottom: -1px;
    width: 1.2rem;

    @if $direction == 'right' {
      margin-left: 4px;
    } @else {
      margin-right: 4px;
    }
  }

  path {
    fill: $color;
  }

  &:visited path {
    fill: $theme-link-visited-color;
  }

  &:hover path {
    fill: $color-medium-hover;
  }
}

@mixin link-arrows($direction) {
  .link-arrow-#{$direction} {
    @include display-arrow("#{$direction}");
    @extend %link-arrow;
  }

  a {
    &:visited .link-arrow-#{$direction} {
      @include display-arrow($direction, $theme-link-visited-color);
    }

    &:hover .link-arrow-#{$direction} {
      @include display-arrow($direction, $color-medium-hover);
    }
  }
}

@include link-arrows('left');
@include link-arrows('right');

.social_icon-twitter {
  @include display-icon(global/social-icons/twitter, before, 1.4rem);
}

.social_icon-rss {
  @include display-icon(global/social-icons/rss, before, 1.4rem);
}

.social_icon-newsletter {
  @include display-icon(global/social-icons/envelope, before, 1.4rem);
}

.link-rss {
  @include display-icon(global/rss, after, $h6-font-size);
  float: right;
  font-size: $h5-font-size;

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

.back-blog {
  display: inline-block;
  font-size: $h6-font-size;
  margin-top: $section-margins !important;

  @include at-media('tablet-lg') {
    margin-top: 0.7rem;
    position: absolute;
  }

  &:hover {
    color: $color-dark;
  }
}

.background-dark {
  .usa-button,
  .usa-button-primary,
  .usa-button:visited,
  .usa-button-primary:visited,
  button,
  [type='button'],
  [type='submit'],
  [type='reset'] {
    background-color: $color-bright;
  }

  .usa-button-secondary {
    &.usa-button:hover,
    &.usa-button-hover {
      background-color: $color-bright-hover;
    }

    &.usa-button:active,
    &.usa-button-active {
      background-color: $color-medium;
    }

    &.usa-button:focus,
    &.usa-button-focus {
      background-color: $color-medium-hover;
    }

    &.usa-button:disabled,
    &.usa-button-disabled {
      background-color: color('gray-cool-10');
      color: color('gray-cool-70');
    }
  }
}