$iconAsButtonColor: $blue-40;
$iconAsButtonActiveColor: rgba($iconAsButtonColor, 0.7);
$iconAsButtonLightColor: $white;
$iconAsButtonLightActiveColor: rgba($iconAsButtonLightColor, 0.7);
$iconAsButtonGrayColor: $gray-70;
$iconAsButtonGrayActiveColor: rgba($iconAsButtonGrayColor, 0.7);
$iconAsButtonGraySecondaryColor: $gray-50;
$iconAsButtonGraySecondaryActiveColor: rgba(
  $iconAsButtonGraySecondaryColor,
  0.7
);
$iconAsButtonGrayLightColor: $gray-40;
$iconAsButtonGrayLightActiveColor: rgba($iconAsButtonGrayLightColor, 0.7);
$iconAsButtonDarkColor: $black;
$iconAsButtonDarkActiveColor: rgba($iconAsButtonDarkColor, 0.7);
$iconAsButtonMintColor: $green-40;
$iconAsButtonMintActiveColor: rgba($iconAsButtonMintColor, 0.7);
$iconAsButtonPeachColor: $red-40;
$iconAsButtonPeachActiveColor: rgba($iconAsButtonPeachColor, 0.7);
$iconAsButtonMustardColor: $yellow-40;
$iconAsButtonMustardActiveColor: rgba($iconAsButtonMustardColor, 0.7);
$iconAsButtonLavenderColor: $indigo-40;
$iconAsButtonLavenderActiveColor: rgba($iconAsButtonLavenderColor, 0.7);
$iconAsButtonActionColor: $white;
$iconAsButtonTransparentColor: rgba($iconAsButtonDarkColor, 0.2);
$iconAsButtonBlueColor: $blue-40;
$iconAsButtonBlueActiveColor: rgba($iconAsButtonBlueColor, 0.7);

$includeHtml: false !default;

@mixin colorTheme(
  $modifierName,
  $color,
  $colorActive,
  $actionForegroundColor: $iconAsButtonActionColor
) {
  &.sg-icon-as-button--#{$modifierName} {
    color: $color;

    @media (hover: hover) {
      &:hover {
        color: $colorActive;
      }
    }

    &:active {
      color: $colorActive;
    }

    .sg-icon-as-button__hole {
      border-color: $color;
    }
  }

  &.sg-icon-as-button--action {
    &:active {
      &.sg-icon-as-button--#{$modifierName} {
        color: $actionForegroundColor;
        background: $color;
      }
    }

    @media (hover: hover) {
      &:hover {
        &.sg-icon-as-button--#{$modifierName} {
          color: $actionForegroundColor;
          background: $color;
        }
      }
    }
  }

  &--action-active {
    &.sg-icon-as-button--#{$modifierName} {
      color: $actionForegroundColor;
      background: $color;
    }
  }
}

@if ($includeHtml) {
  .sg-icon-as-button {
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: visible;
    color: $iconAsButtonColor;

    &:active {
      color: $iconAsButtonActiveColor;
    }

    @media (hover: hover) {
      &:hover {
        color: $iconAsButtonActiveColor;
      }
    }

    &__hole {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
    }

    &--with-border {
      .sg-icon-as-button__hole {
        border: solid $iconAsButtonColor 1px;
        border-radius: var(--border-radius-pill);
      }
    }

    &--adaptive {
      color: inherit;

      &:hover,
      &:active {
        color: inherit;
      }

      .sg-icon-as-button__hole {
        border-color: inherit;
      }
    }

    &--small {
      .sg-icon-as-button__hole {
        width: 24px;
        height: 24px;
      }
    }

    @include colorTheme(
      'icon-white',
      $iconAsButtonLightColor,
      $iconAsButtonLightActiveColor,
      $iconAsButtonColor
    );
    @include colorTheme(
      'icon-black',
      $iconAsButtonDarkColor,
      $iconAsButtonDarkActiveColor
    );
    @include colorTheme(
      'icon-gray-70',
      $iconAsButtonGrayColor,
      $iconAsButtonGrayActiveColor
    );
    @include colorTheme(
      'icon-gray-50',
      $iconAsButtonGraySecondaryColor,
      $iconAsButtonGraySecondaryActiveColor
    );
    @include colorTheme(
      'icon-gray-40',
      $iconAsButtonGrayLightColor,
      $iconAsButtonGrayLightActiveColor
    );
    @include colorTheme(
      'icon-green-50',
      $iconAsButtonMintColor,
      $iconAsButtonMintActiveColor
    );
    @include colorTheme(
      'icon-blue-50',
      $iconAsButtonBlueColor,
      $iconAsButtonBlueActiveColor
    );
    @include colorTheme(
      'icon-yellow-50',
      $iconAsButtonMustardColor,
      $iconAsButtonMustardActiveColor
    );
    @include colorTheme(
      'icon-indigo-50',
      $iconAsButtonLavenderColor,
      $iconAsButtonLavenderActiveColor
    );
    @include colorTheme(
      'icon-red-50',
      $iconAsButtonPeachColor,
      $iconAsButtonPeachActiveColor
    );

    &--action {
      transition: background 0.3s ease-out, color 0.3s ease-out;
      border-radius: var(--border-radius-pill);
    }

    &--transparent {
      transition: background 0.3s ease-out, color 0.3s ease-out;
      border-radius: var(--border-radius-pill);

      &:active {
        background: $iconAsButtonTransparentColor;
      }

      @media (hover: hover) {
        &:hover {
          background: $iconAsButtonTransparentColor;
        }
      }
    }

    &--action-active {
      background: $iconAsButtonColor;
      color: $iconAsButtonActionColor;
      border-radius: var(--border-radius-pill);

      &.sg-icon-as-button--adaptive {
        color: inherit;
        background: inherit;
      }
    }

    &--transparent-active {
      color: $iconAsButtonColor;
      background: $iconAsButtonTransparentColor;

      &.sg-icon-as-button--adaptive {
        color: inherit;
      }
    }
  }
}