@import "../../helpers";
button.sf-circle-icon {
  border: none !important;
}
.sf-circle-icon {
  --icon-color: var(--c-white);
  --button-padding: 0;
  --icon-size: 1.5rem;
  --button-size: 3.25rem;
  --button-background: var(--c-primary);
  --button-border-radius: 100%;
  position: var(--circle-icon-position, relative);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-primary);
  &:hover {
    --button-background: var(--c-secondary);
    --button-box-shadow-opacity: 0.3;
  }
  &:active {
    --button-box-shadow: 0 0 0 0.5rem var(--c-primary);
  }
  &:disabled {
    --button-box-shadow: 0px 4px 11px var(--c-light);
    --button-box-shadow-opacity: 1;
    --icon-color: var(--c-text-disabled);
    --button-background: var(--c-light);
  }
  &__icon {
    --icon-position: static;
  }
  @each $color, $map in $colors-map {
    $primary: map-get($map, "primary");
    $variant: map-get($map, "variant");
    &.color-#{$color} {
      --button-background: var(--c-#{$color});
      --button-box-shadow: 0 0 0 0.3125rem var(--c-#{$color});

      &:hover {
        --button-background: var(--c-#{$color}-lighten);
        --button-box-shadow-opacity: 0.08;
      }
      &:active {
        --button-box-shadow: 0 0 0 0.5rem var(--c-#{$color});
      }
      &:disabled {
        --button-box-shadow: 0px 4px 11px var(--c-light);
        --button-box-shadow-opacity: 1;
        --icon-color: var(--c-text-disabled);
        --button-background: var(--c-light);
      }
    }
  }
  &--small {
    --icon-size: 8px;
    --button-size: 1.625rem;
    --button-transition: background 150ms ease;
    &:hover {
      --button-background: var(--c-secondary);
      --button-box-shadow: 0 0 0 0.1875rem var(--c-primary);
    }
    &:active {
      --button-box-shadow: 0 0 0 0.25rem var(--c-primary);
    }
    &:disabled {
      --button-box-shadow: 0px 4px 11px var(--c-light);
      --button-box-shadow-opacity: 1;
      --icon-color: var(--c-text-disabled);
      --button-background: var(--c-light);
    }
    @each $color, $map in $colors-map {
      $primary: map-get($map, "primary");
      $variant: map-get($map, "variant");
      &.color-#{$color} {
        &:hover {
          --button-box-shadow: 0 0 0 0.1875rem var(--c-#{$color});
        }
        &:active {
          --button-box-shadow: 0 0 0 0.25rem var(--c-#{$color});
        }
        &:disabled {
          --button-box-shadow: 0px 4px 11px var(--c-light);
          --button-box-shadow-opacity: 1;
          --icon-color: var(--c-text-disabled);
          --button-background: var(--c-light);
        }
      }
    }
  }
}