@import "../../helpers";
.sf-button {
  display: inline-block;
  --link-color: var(--button-color, var(--c-dark-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-xl));
  color: var(--button-color, var(--link-color));
  background: var(--button-background, var(--c-primary));
  transition: var(--button-transition, background 0.8s);
  background-position: center;
  text-transform: var(--button-text-transform, none);
  text-decoration: var(--button-text-decoration);
  cursor: var(--button-cursor, pointer);
  border-radius: var(--button-border-radius, 9999px);
  white-space: var(--button-wrap, nowrap);
  @include font(
                  --button-font,
                  var(--font-weight--normal),
                  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");
    $secondary: map-get($map, "secondary");
    $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-secondary,
    &.color-danger,
    &.color-info {
      color: var(--c-light-variant);
    }
    &.color-light {
      &: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: 3px;
    --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 {
    --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;
    --button-border-radius: 0;
    --button-padding: 0;
    &: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-4xl);
  &.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;
    }
  }
  &:hover {
    --link-color: var(--c-primary);
    background: var(--c-secondary);
  }
}
.form__action-button--lg {
  border: none !important;
  font-family: var(--c-text-secondary);
  &:hover {
    background: var(--c-secondary) !important;
    color: var(--c-primary);
  }
}