/// Set button colors.
///
/// @group buttons
///
/// @parameter {String} $modifier - button modifier.
/// @parameter {Map} $options - options to add base styles and svg styles.
///
/// @example scss - Usage
///   @include k-buttonColors('helium');
///
/// @example css - CSS output
///   background-color: #19b4fa;
///   color: #fff;
///   …

@mixin k-buttonColors($modifier, $options: ()) {
  $options: map-merge((base: true, svg: true), $options);

  $colors: (
    'hydrogen': (
      base: (
        color: map-get($k-colors, 'font-1'),
        border-color: map-get($k-colors, 'line-1'),
        background-color: map-get($k-colors, 'background-1'),
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'helium': (
      base: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-2'),
        background-color: map-get($k-colors, 'primary-2'),
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-2'),
        background-color: map-get($k-colors, 'primary-2'),
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'lithium': (
      base: (
        color: map-get($k-colors, 'primary-1'),
        border-color: map-get($k-colors, 'primary-4'),
        background-color: map-get($k-colors, 'background-1'),
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'beryllium': (
      base: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'font-1'),
        background-color: map-get($k-colors, 'font-1'),
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'carbon': (
      base: (
        color: map-get($k-colors, 'font-1'),
        border-color: map-get($k-colors, 'background-1'),
        background-color: map-get($k-colors, 'background-1'),
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'primary-1'),
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'primary-3'),
        background-color: map-get($k-colors, 'primary-3'),
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'azote': (
      base: (
        color: map-get($k-colors, 'font-1'),
        border-color: map-get($k-colors, 'line-1'),
        background-color: map-get($k-colors, 'background-1'),
      ),
      hover: (
        color: map-get($k-colors, 'primary-1'),
        border-color: map-get($k-colors, 'primary-4'),
        background-color: map-get($k-colors, 'background-1'),
      ),
      focus: (
        color: map-get($k-colors, 'primary-1'),
        border-color: map-get($k-colors, 'primary-4'),
        background-color: map-get($k-colors, 'background-1'),
      ),
      active: (
        color: map-get($k-colors, 'primary-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'background-1'),
      ),
      is-selected: (
        color: map-get($k-colors, 'primary-1'),
        border-color: map-get($k-colors, 'primary-1'),
        background-color: map-get($k-colors, 'background-1'),
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'facebook': (
      base: (
        color: map-get($k-colors, 'background-1'),
        border-color: #3b5998,
        background-color: #3b5998,
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: #2c4a89,
        background-color: #2c4a89,
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: #2c4a89,
        background-color: #2c4a89,
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: #1d3b7a,
        background-color: #1d3b7a,
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: #1d3b7a,
        background-color: #1d3b7a,
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'twitter': (
      base: (
        color: map-get($k-colors, 'background-1'),
        border-color: #55acee,
        background-color: #55acee,
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: #469ddf,
        background-color: #469ddf,
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: #469ddf,
        background-color: #469ddf,
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: #388ed0,
        background-color: #388ed0,
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: #388ed0,
        background-color: #388ed0,
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'linkedin': (
      base: (
        color: map-get($k-colors, 'background-1'),
        border-color: #00669e,
        background-color: #00669e,
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: #00578f,
        background-color: #00578f,
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: #00578f,
        background-color: #00578f,
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: #004880,
        background-color: #004880,
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: #004880,
        background-color: #004880,
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'instagram': (
      base: (
        color: map-get($k-colors, 'background-1'),
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        background-color: map-get($k-colors, 'line-2'),
        background-image: none,
      ),
    ),

    'youtube': (
      base: (
        color: map-get($k-colors, 'background-1'),
        border-color: #ff0000,
        background-color: #ff0000,
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: #f00000,
        background-color: #f00000,
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: #f00000,
        background-color: #f00000,
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: #e10000,
        background-color: #e10000,
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: #e10000,
        background-color: #e10000,
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),

    'pinterest': (
      base: (
        color: map-get($k-colors, 'background-1'),
        border-color: #bd081c,
        background-color: #bd081c,
      ),
      hover: (
        color: map-get($k-colors, 'background-1'),
        border-color: #ae000d,
        background-color: #ae000d,
      ),
      focus: (
        color: map-get($k-colors, 'background-1'),
        border-color: #ae000d,
        background-color: #ae000d,
      ),
      active: (
        color: map-get($k-colors, 'background-1'),
        border-color: #9f0000,
        background-color: #9f0000,
      ),
      is-selected: (
        color: map-get($k-colors, 'background-1'),
        border-color: #9f0000,
        background-color: #9f0000,
      ),
      disabled: (
        color: map-get($k-colors, 'background-1'),
        border-color: map-get($k-colors, 'line-2'),
        background-color: map-get($k-colors, 'line-2'),
      ),
    ),
  );

  $colorByModifier: map-get($colors, $modifier);

  @if map-get($options, 'base') {
    @include k-buttonColorBase($colorByModifier);
  }

  @if map-get($options, 'svg') {
    @include k-buttonSvg($colorByModifier);
  }

  // Force background instagram button
  @if $modifier == 'instagram' {
    & {
      background: radial-gradient(
        circle at 32% 100%,
        #ffe17d 0%,
        #ffcd69 10%,
        #fa9137 28%,
        #eb4141 42%,
        transparent 82%
      ),
      linear-gradient(
        135deg,
        #234bd7 12%,
        #c33cbe 58%
      );
    }
    &:hover,
    &:focus {
      background: radial-gradient(
        circle at 32% 100%,
        #f0d26e 0%,
        #f0be5a 10%,
        #eb8228 28%,
        #dc3232 42%,
        transparent 82%
      ),
      linear-gradient(
        135deg,
        #143cc8 12%,
        #b42daf 58%
      );
    }
    &:active,
    &.is-selected {
      background: radial-gradient(
        circle at 32% 100%,
        #e1c35f 0%,
        #e1af4b 10%,
        #dc7319 28%,
        #cd2323 42%,
        transparent 82%
      ),
      linear-gradient(
        135deg,
        #052db9 12%,
        #a51ea0 58%
      );
    }
  }
}