@import "../../../theme/global";
/**
* @prop --lar-button-border-radius: Button border radius
* @prop --lar-button-padding-top: Button padding top
* @prop --lar-button-padding-right: Button padding right
* @prop --lar-button-padding-bottom: Button padding bottom
* @prop --lar-button-padding-left: Button padding left
* @prop --lar-button-font-size: Button font size

* @prop --lar-button-border-radius-small: Button border radius
* @prop --lar-button-padding-top-small: Button padding top
* @prop --lar-button-padding-right-small: Button padding right
* @prop --lar-button-padding-bottom-small: Button padding bottom
* @prop --lar-button-padding-left-small: Button padding left
* @prop --lar-button-font-size-small: Button font size


  */
$button-border-radius:       var(--lar-button-border-radius, .6rem) !default;
$button-padding-top:         var(--lar-button-padding-top, 1rem) !default;
$button-padding-right:       var(--lar-button-padding-right, 1rem) !default;
$button-padding-bottom:      var(--lar-button-padding-bottom, 1rem) !default;
$button-padding-left:        var(--lar-button-padding-left, 1rem) !default;

$button-font-size:           var(--lar-button-font-size, 1.2rem) !default;

$button-font-size-small:     var(--lar-button-font-size-small, 1rem) !default;

$button-border-radius-small:       var(--lar-button-border-radius-small, .6rem) !default;

$button-padding-top-small:         var(--lar-button-padding-top-small, .6rem) !default;
$button-padding-right-small:       var(--lar-button-padding-right-small, .6rem) !default;
$button-padding-bottom-small:      var(--lar-button-padding-bottom-small, .6rem) !default;
$button-padding-left-small:        var(--lar-button-padding-left-small, .6rem) !default;

:host {
  display: inline-block;
  @include border-radius($button-border-radius);
  overflow: hidden;
}
:host(.lar-button-full) {
  display: block;
  width: 100%;
}
button {
  @include padding($button-padding-top, $button-padding-right, $button-padding-bottom, $button-padding-left);
  font-size: $button-font-size;
  display: block;
  width: 100%;
  height: 100%;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden !important;
  border: 0;
  cursor: pointer;
  position: relative;
}

:host(.lar-button-small) button {
  @include padding($button-padding-top-small, $button-padding-right-small, $button-padding-bottom-small, $button-padding-left-small);
  font-size: $button-font-size-small;
}

:host(.lar-button-small) {
  @include border-radius($button-border-radius-small);
}

// key focus
// :host(.toggle-key) button { }
button:focus {
  outline: none;
}
:host(.lar-button-disabled) {
  pointer-events: none;
  opacity: 0.3;
  filter: grayscale(0.4);
}
:host(.lar-button-outline) {
  background: transparent;
  border: 2px solid;
}


@mixin generate-button-color($color-name) {
  background: lar-color($color-name, base) !important;
  color: lar-color($color-name, contrast) !important;
  fill: lar-color($color-name, contrast) !important;
  stroke: lar-color($color-name, contrast) !important;
}

@mixin generate-button-outline-color($color-name) {
  $value: map-get($colors, $color-name);
  $base: map-get($value, base);
  $base-rgb: color-to-rgb-list($base);

  background: rgba(var(--lar-color-#{$color-name}-rgb, #{$base-rgb}), 0.05) !important;
  border-color: lar-color($color-name, base) !important;
  color: lar-color($color-name, base) !important;
  fill: lar-color($color-name, base) !important;
  stroke: lar-color($color-name, base) !important;
}

@mixin generate-button-hover-color($color-name) {
  background: lar-color($color-name, tint) !important;
}

@mixin generate-button-active-color($color-name) {
  background: lar-color($color-name, shade) !important;
  color: lar-color($color-name, contrast) !important;
}

@each $color-name, $value in $colors {
  :host(.lar-color-#{$color-name}) button {
    @include generate-button-color($color-name);
  }
  :host(.lar-color-#{$color-name}) button:hover {
    @include generate-button-hover-color($color-name);
  }
  :host(.lar-color-#{$color-name}) button:active {
    @include generate-button-active-color($color-name);
  }

  :host(.lar-color-#{$color-name}.lar-button-outline) button {
    background: transparent !important;
    color: inherit !important;
    fill: inherit !important;
    stroke: inherit !important;
  }
  :host(.lar-color-#{$color-name}.lar-button-outline) {
    @include generate-button-outline-color($color-name);
  }

  :host(.lar-color-#{$color-name}.lar-button-outline) button:hover {
    $value: map-get($colors, $color-name);
    $base: map-get($value, base);
    $base-rgb: color-to-rgb-list($base);

    background: rgba(var(--lar-color-#{$color-name}-rgb, #{$base-rgb}), 0.12) !important;
  }
  :host(.lar-color-#{$color-name}.lar-button-outline) button:active {
    $value: map-get($colors, $color-name);
    $base: map-get($value, base);
    $base-rgb: color-to-rgb-list($base);

    background: rgba(var(--lar-color-#{$color-name}-rgb, #{$base-rgb}), 0.2) !important;
    color: lar-color($color-name, base) !important;
    fill: lar-color($color-name, base) !important;
    stroke: lar-color($color-name, base) !important;
  }

}