@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "../utilities/functions" as fn;

$button-colors: (
  ) !default;

$button-focus-box-shadow-size: 0 0 0 0.125em !default;

.button {
  @each $name, $pair in $button-colors {
    $color: list.nth($pair, 1
    );
  $color-invert: list.nth($pair, 2);

  &.is-#{$name} {
    background-color: $color;
    border-color: transparent;
    color: $color-invert;

    &:hover,
    &.is-hovered {
      background-color: fn.bulmaDarken($color, 2.5%);
      border-color: transparent;
      color: $color-invert;
    }

    &:focus,
    &.is-focused {
      border-color: transparent;
      color: $color-invert;

      &:not(:active) {
        box-shadow: $button-focus-box-shadow-size fn.bulmaRgba($color, 0.25);
      }
    }

    &:active,
    &.is-active {
      background-color: fn.bulmaDarken($color, 5%);
      border-color: transparent;
      color: $color-invert;
    }

    &[disabled],
    fieldset[disabled] & {
      background-color: $color;
      border-color: transparent;
      box-shadow: none;
    }

    &.is-inverted {
      background-color: $color-invert;
      color: $color;

      &:hover,
      &.is-hovered {
        background-color: fn.bulmaDarken($color-invert, 5%);
      }

      &[disabled],
      fieldset[disabled] & {
        background-color: $color-invert;
        border-color: transparent;
        box-shadow: none;
        color: $color;
      }
    }

    &.is-loading {
      &::after {
        border-color: transparent transparent $color-invert $color-invert !important;
      }
    }

    &.is-outlined {
      background-color: transparent;
      border-color: $color;
      color: $color;

      &:hover,
      &.is-hovered,
      &:focus,
      &.is-focused {
        background-color: $color;
        border-color: $color;
        color: $color-invert;
      }

      &.is-loading {
        &::after {
          border-color: transparent transparent $color $color !important;
        }

        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused {
          &::after {
            border-color: transparent transparent $color-invert $color-invert !important;
          }
        }
      }

      &[disabled],
      fieldset[disabled] & {
        background-color: transparent;
        border-color: $color;
        box-shadow: none;
        color: $color;
      }
    }

    &.is-inverted.is-outlined {
      background-color: transparent;
      border-color: $color-invert;
      color: $color-invert;

      &:hover,
      &.is-hovered,
      &:focus,
      &.is-focused {
        background-color: $color-invert;
        color: $color;
      }

      &.is-loading {

        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused {
          &::after {
            border-color: transparent transparent $color $color !important;
          }
        }
      }

      &[disabled],
      fieldset[disabled] & {
        background-color: transparent;
        border-color: $color-invert;
        box-shadow: none;
        color: $color-invert;
      }
    }

    @if list.length($pair)>=4 {
      $color-light: list.nth($pair, 3);
      $color-dark: list.nth($pair, 4);

      &.is-light {
        background-color: $color-light;
        color: $color-dark;

        &:hover,
        &.is-hovered {
          background-color: fn.bulmaDarken($color-light, 2.5%);
          border-color: transparent;
          color: $color-dark;
        }

        &:active,
        &.is-active {
          background-color: fn.bulmaDarken($color-light, 5%);
          border-color: transparent;
          color: $color-dark;
        }
      }

      &.is-dark {
        background-color: $color-dark;
        color: fn.findColorInvert($color-dark);

        &:hover,
        &.is-hovered {
          background-color: fn.bulmaDarken($color-dark, 2.5%);
          border-color: transparent;
          color: fn.findColorInvert($color-dark);
        }

        &:active,
        &.is-active {
          background-color: fn.bulmaDarken($color-dark, 5%);
          border-color: transparent;
          color: fn.findColorInvert($color-dark);
        }
      }
    }
  }
}
}

@each $name, $pair in $button-colors {
  $color: list.nth($pair, 1);

  .has-text-#{$name} {
    color: $color !important;
  }

  a.has-text-#{$name} {

    &:hover,
    &:focus {
      color: fn.bulmaDarken($color, 10%) !important;
    }
  }

  .has-background-#{$name} {
    background-color: $color !important;
  }

  @if list.length($pair)>=4 {
    $color-light: list.nth($pair, 3);
    $color-dark: list.nth($pair, 4);

    .has-text-#{$name}-light {
      color: $color-light !important;
    }

    a.has-text-#{$name}-light {

      &:hover,
      &:focus {
        color: fn.bulmaDarken($color-light, 10%) !important;
      }
    }

    .has-background-#{$name}-light {
      background-color: $color-light !important;
    }

    .has-text-#{$name}-dark {
      color: $color-dark !important;
    }

    a.has-text-#{$name}-dark {

      &:hover,
      &:focus {
        color: fn.bulmaLighten($color-dark, 10%) !important;
      }
    }

    .has-background-#{$name}-dark {
      background-color: $color-dark !important;
    }
  }
}

.no-animation {
  transition-property: none !important;
}