@import "../../helpers";
.sf-button {
  --link-color: var(--button-color, var(--c-light-variant));
  box-sizing: border-box;
  position: relative;
  width: var(--button-size, var(--button-width));
  height: var(--button-size, var(--button-height));
  display: var(--button-display, flex);
  align-items: center;
  justify-content: center;
  padding: var(--button-padding, var(--spacer-sm) var(--spacer-base));
  color: var(--button-color, var(--c-light-variant));
  background: var(--button-background, var(--c-primary));
  transition: var(--button-transition,  background 0.8s);
  background-position: center;
  text-transform: var(--button-text-transform, uppercase);
  text-decoration: var(--button-text-decoration);
  cursor: var(--button-cursor, pointer);
  border-radius: var(--button-border-radius, 0);
  white-space: var(--button-wrap, nowrap);
  @include font(
    --button-font,
    var(--font-weight--semibold),
    var(--font-size--base),
    1.2,
    var(--font-family--secondary)
  );
  @include border(--button-border, 0, solid, var(--c-primary));
  @include box-shadow(
    --button-box-shadow,
    4px,
    12px,
    24px,
    0px,
    var(--c-gray),
  );
  --button-box-shadow-opacity: 0;
  @each $color, $map in $colors-map {
    $primary: map-get($map, "primary");
    $variant: map-get($map, "variant");
    &.color-#{$color} {
      --button-background: #{$primary};
      &:hover {
        --button-background: #{$primary} radial-gradient(circle, transparent 1%, #{$variant} 1%) center/15000%;
      }
      &:active {
        --button-background:  #{$primary} radial-gradient(circle, transparent 40%, #{$variant} 1%) center/15000%;
      }
    }
    &.color-light {
      color: var(--c-gray);
      &:hover {
        --button-background: var(--c-light) radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%) center/15000%;
      }
      &:active {
        --button-background: var(--c-light) radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%) center/15000%;
      }
    }
  }   
  &:hover {
    --button-box-shadow-opacity: 0.25;
    --button-background: var(--c-primary) radial-gradient(circle, transparent 1%, var(--c-primary-variant) 1%) center/15000%;
  }
  &:active {
    --button-box-shadow: none;
    --button-background: var(--c-primary) radial-gradient(circle, transparent 40%, var(--c-primary-variant) 1%) center/15000%;
    --button-transition: background 0s ;
    --button-text-decoration: underline;
  background-size: 100%;
  }
  &--pure {
    --button-padding: 0;
    --button-background: transparent;
    --button-color: var(--c-text);
    --button-text-transform: none;
    --button-wrap: normal;
    --button-box-shadow: none;
    &:active, &:hover {
      --button-background: transparent;
      --button-text-decoration: none;
    }
  }
  &--full-width {
    --button-width: 100%;
  }
  &--outline {
    --button-border-width: 1px;
    --button-background: transparent;
    --button-color: var(--c-text);
    &:hover {
      --button-background: transparent;
    }
    &:active {
      --button-border-color: var(--c-primary-variant);
      --button-background: transparent;
      --button-transition: color 150ms linear;
    }
    @each $color, $map in $colors-map {
      $primary: map-get($map, "primary");
      &.color-#{$color} {
        --button-border-color: #{$primary};
        --button-background: transparent;
        &:active {
          --button-background: transparent;
        }
      }
    }
  }
  &--text {
    --button-border-width: 0;
    --button-padding: 0;
    --button-background: transparent;
    --button-color: var(--c-text);
    --button-text-transform: none;
    --button-text-decoration: underline;
    --button-font-size: var(--font-size--sm);
    --button-font-weight: var(--font-weight--medium);
    --button-box-shadow: none;
    display: inline;
    &:hover {
      --button-background: transparent;
      --button-color: var(--c-primary);
    }
    &:active {
      --button-color: var(--c-gray);
    }       
    @each $color, $map in $colors-map {
      $primary: map-get($map, "primary");
      &.color-#{$color} {
        --button-background: transparent;
        &:hover {
          --button-color: #{$primary};
        }
        &:active {
          --button-color: var(--c-gray);
          --button-background: transparent;
        }
      }
    }
  }  
  &.is-disabled--button,
  &.is-disabled--button:hover,
  &.is-disabled--button:active {
    --button-color: var(--c-text-disabled);
    --button-border-color: transparent;
    --button-background: var(--c-light);
    --button-box-shadow: none;
    pointer-events: none;
    cursor: default;
    &.sf-button--text {
      --button-background: transparent;
      --button-color: var(--c-gray-variant);
    }
    &.sf-button--outline {
      --button-border-color: var(--c-light);
      --button-background: transparent;
    }
  }
  &--underlined {
    --button-border-width: 0 0 1px 0;
    --button-border-color: var(--c-light);
    --button-background: transparent;
    --button-color: var(--c-text-muted);
    --button-box-shadow: none;
    &:active {
      --button-background: var(--c-gray-variant);
      --button-color: var(--c-light-variant);
    }
    &:hover {
      --button-background: var(--c-gray-variant);
      --button-color: var(--c-white);
    }
    @each $color, $map in $colors-map {
      $primary: map-get($map, "primary");
      &.color-#{$color} {
        --button-background: transparent;
        &:active {
          --button-background: #{$primary};
          --button-border-width: 0 0 1px 0;
          --button-border-color: var(--c-light);
        }
      }
    }
  }
  @include for-desktop {
    --button-padding: var(--spacer-sm) var(--spacer-lg);
    &--pure, &--text {
      --button-padding: 0;
    }
  }
}
.sf-link {
  --button-width: var(--spacer-3xl);
  &.is-disabled--link,
  &.is-disabled--link:hover { 
    --button-box-shadow: none;
    --button-border-color: transparent;
    --button-background: var(--c-light); 
    pointer-events: none;      
    cursor: default;
    &.sf-button {
      --button-color: var(--c-text-disabled);
      &--text {
        --button-background: transparent;
        --link-color: var(--c-gray-variant); 
      }      
    }
    &.sf-button--outline {
      --button-border-color: var(--c-light);
      --button-background: transparent;
    }
  }
  &.sf-button--full-width {
    --button-width: 100%;
  }
}