// Social Buttons
.button.button--social,
a.button.button--social {
  border-color: $color--grey;
  color: $color-brand--one;
  padding: 0 $spacing--s;

  &:hover,
  &:focus {
    background: $color--one-7;
    border-color: $color-brand--one;

    .icon svg {
      fill: $color-brand--one;
    }
  }

  // on touch devices hover is similar to ':active' state.
  // outputs regular ':active' state & specific ':hover'
  // state for touch devices
  & {
    @include hover-touch {
      background: $color--one-7;
      border-color: $color-brand--one;
    }
  }
}

/// icon colors in alphabetical order

.button--social.social-btn {
  &--apple .icon-apple {
    fill: black;
  }

  &--drive .icon-drive {
    --drive-color-1: #4688f4;
    --drive-color-2: #089156;
    --drive-color-3: #fccd48;
  }
  //drive hover path
  &--drive:hover .icon-drive {
    --drive-color-1: #2175d9;
    --drive-color-2: #2175d9;
    --drive-color-3: #2175d9;
  }

  &--dropbox .icon-dropbox {
    fill: #0061ff;
  }

  &--facebook .icon-facebook {
    fill: #1977f3;
  }

  &--google .icon-google {
    --google-color-1: #4285f4;
    --google-color-2: #34a853;
    --google-color-3: #fbbc05;
    --google-color-4: #ea4335;
  }
  //google hover path
  &--google:hover .icon-google {
    --google-color-1: #2175d9;
    --google-color-2: #2175d9;
    --google-color-3: #2175d9;
    --google-color-4: #2175d9;
  }

  &--indeed .icon-indeed {
    fill: #2164f4;
  }

  &--itsme .icon-itsme {
    fill: #ff4612;
  }

  &--linkedin .icon-linkedin {
    fill: #0e76a8;
  }

  &--monster .icon-monster {
    fill: #7046ae;
  }

  &--seek .icon-seek {
    fill: #0d3880;
  }
}