// @button--{{color}}

// dark blue 180
// added first for specificity
@mixin button--dark-blue-180 {
  border-color: returnColorCSSVar('brand-secondary-shade-180');
  color: returnColorCSSVar('brand-secondary-shade-180');

  &:hover,
  &:focus {
    background: $color--two-180;
    border-color: $color--two-180;
    color: $color-brand--white;

    .icon svg {
      fill: returnColorCSSVar('white');
    }
  }

  // on touch devices hover is similar to ':active' state.
  // outputs regular ':active' state & specific ':hover'
  // state for touch devices
  & {
    @include hover-touch {
      background: returnColorCSSVar('brand-secondary-shade-180');
      border-color: returnColorCSSVar('brand-secondary-shade-180');
      color: returnColorCSSVar('white');
    }
  }
  .icon svg {
    fill: returnColorCSSVar('brand-secondary-shade-180');
  }

  &.button--filled .icon svg {
    fill: returnColorCSSVar('white');
  }
}

// dark blue
@mixin button--dark {
  border-color: currentColor;
  color: returnColorCSSVar('brand-secondary');

  &:hover,
  &:focus {
    background: $color-brand--two;
    border-color: $color-brand--two;
    color: $color-brand--white;

    .icon svg {
      fill: returnColorCSSVar('white');
    }
  }

  // on touch devices hover is similar to ':active' state.
  // outputs regular ':active' state & specific ':hover'
  // state for touch devices
  & {
    @include hover-touch {
      background: returnColorCSSVar('brand-secondary-shade-180');
      border-color: returnColorCSSVar('brand-secondary-shade-180');
      color: returnColorCSSVar('white');
    }
  }
  .icon svg {
    fill: returnColorCSSVar('brand-secondary');
  }

  &.button--filled .icon svg {
    fill: returnColorCSSVar('white');
  }
}

// off-white
@mixin button--light {
  border-color: returnColorCSSVar('brand-tertiary');
  color: returnColorCSSVar('brand-tertiary');

  &:hover,
  &:focus {
    background: $color-brand--four;
    border-color: $color-brand--white;
    color: $color-brand--two;

    .icon svg {
      fill: returnColorCSSVar('brand-secondary');
    }
  }

  // on touch devices hover is similar to ':active' state.
  // outputs regular ':active' state & specific ':hover'
  // state for touch devices
  & {
    @include hover-touch {
      background: returnColorCSSVar('brand-tertiary-shade-110');
      border-color: returnColorCSSVar('brand-tertiary-shade-110');
      color: returnColorCSSVar('brand-secondary');
    }
  }
  .icon svg {
    fill: returnColorCSSVar('brand-tertiary');
  }
}

// white
@mixin button--white {
  border-color: returnColorCSSVar('white');
  color: returnColorCSSVar('white');

  &:hover,
  &:focus {
    background: $color-brand--white;
    border-color: $color-brand--white;
    color: $color-brand--two;

    .icon svg {
      fill: returnColorCSSVar('brand-secondary');
    }
  }

  // on touch devices hover is similar to ':active' state.
  // outputs regular ':active' state & specific ':hover'
  // state for touch devices
  & {
    @include hover-touch {
      background: returnColorCSSVar('gray-20');
      border-color: returnColorCSSVar('gray-20');
      color: returnColorCSSVar('brand-secondary');
    }
  }
  .icon svg {
    fill: returnColorCSSVar('white');
  }

  &.button--filled .icon svg {
    fill: returnColorCSSVar('brand-secondary');
  }
}

// blue
@mixin button--blue {
  border-color: returnColorCSSVar('brand-primary');
  color: returnColorCSSVar('brand-primary');

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

  // on touch devices hover is similar to ':active' state.
  // outputs regular ':active' state & specific ':hover'
  // state for touch devices
  & {
    @include hover-touch {
      background: returnColorCSSVar('brand-primary-shade-130');
      border-color: returnColorCSSVar('brand-primary-shade-130');
      color: returnColorCSSVar('white');
      outline: none;
    }
  }
}