@import "../utilities/controls";
@import "../utilities/mixins";

$button-color: getVar("text-strong") !default;
$button-background-color: getVar("scheme-main") !default;
$button-family: false !default;
$button-weight: getVar("weight-medium") !default;

$button-border-color: getVar("border") !default;
$button-border-width: getVar("control-border-width") !default;

$button-padding-vertical: calc(
  0.5em - #{getVar("button-border-width")}
) !default;
$button-padding-horizontal: 1em !default;

$button-hover-color: getVar("link-hover") !default;
$button-hover-border-color: getVar("link-hover-border") !default;

$button-focus-color: getVar("link-focus") !default;
$button-focus-border-color: getVar("link-focus-border") !default;
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;

$button-active-color: getVar("link-active") !default;
$button-active-border-color: getVar("link-active-border") !default;

$button-text-color: getVar("text") !default;
$button-text-decoration: underline !default;
$button-text-hover-background-color: getVar("background") !default;
$button-text-hover-color: getVar("text-strong") !default;

$button-ghost-background: none !default;
$button-ghost-border-color: transparent !default;
$button-ghost-color: getVar("link") !default;
$button-ghost-decoration: none !default;
$button-ghost-hover-color: getVar("link") !default;
$button-ghost-hover-decoration: underline !default;

$button-disabled-background-color: getVar("scheme-main") !default;
$button-disabled-border-color: getVar("border") !default;
$button-disabled-shadow: none !default;
$button-disabled-opacity: 0.5 !default;

$button-static-color: getVar("text-light") !default;
$button-static-background-color: getVar("scheme-main-ter") !default;
$button-static-border-color: getVar("border") !default;

$dark-shade: 20 !default;
$dark-invert-shade: 90 !default;
$light-shade: 90 !default;
$light-invert-shade: 50 !default;
$button-hover-s: 10% !default;
$button-hover-l: -10% !default;
$button-active-s: 20% !default;
$button-active-l: -20% !default;
$button-light-l: 95% !default;
$button-light-text-l: 33% !default;
$button-light-hover-l: 93% !default;
$button-light-active-l: 91% !default;

$button-colors: $colors !default;
$button-responsive-sizes: (
  "mobile": (
    "small": calc(#{getVar("size-small")} * 0.75),
    "normal": calc(#{getVar("size-small")} * 0.875),
    "medium": getVar("size-small"),
    "large": getVar("size-normal"),
  ),
  "tablet-only": (
    "small": calc(#{getVar("size-small")} * 0.875),
    "normal": getVar("size-small"),
    "medium": getVar("size-normal"),
    "large": getVar("size-medium"),
  ),
) !default;

// The button sizes use mixins so they can be used at different breakpoints
@mixin button-small {
  &:not(.is-rounded) {
    border-radius: getVar("radius-small");
  }

  font-size: getVar("size-small");
}

@mixin button-normal {
  font-size: getVar("size-normal");
}

@mixin button-medium {
  font-size: getVar("size-medium");
}

@mixin button-large {
  font-size: getVar("size-large");
}

:root {
  @include register-vars(
    (
      button-color: #{$button-color},
      button-background-color: #{$button-background-color},
      button-family: #{$button-family},
      button-weight: #{$button-weight},
      button-border-color: #{$button-border-color},
      button-border-width: #{$button-border-width},
      button-padding-vertical: #{$button-padding-vertical},
      button-padding-horizontal: #{$button-padding-horizontal},
      button-hover-color: #{$button-hover-color},
      button-hover-border-color: #{$button-hover-border-color},
      button-focus-color: #{$button-focus-color},
      button-focus-border-color: #{$button-focus-border-color},
      button-focus-box-shadow-size: #{$button-focus-box-shadow-size},
      button-focus-box-shadow-color: #{$button-focus-box-shadow-color},
      button-active-color: #{$button-active-color},
      button-active-border-color: #{$button-active-border-color},
      button-text-color: #{$button-text-color},
      button-text-decoration: #{$button-text-decoration},
      button-text-hover-background-color: #{$button-text-hover-background-color},
      button-text-hover-color: #{$button-text-hover-color},
      button-ghost-background: #{$button-ghost-background},
      button-ghost-border-color: #{$button-ghost-border-color},
      button-ghost-color: #{$button-ghost-color},
      button-ghost-decoration: #{$button-ghost-decoration},
      button-ghost-hover-color: #{$button-ghost-hover-color},
      button-ghost-hover-decoration: #{$button-ghost-hover-decoration},
      button-disabled-background-color: #{$button-disabled-background-color},
      button-disabled-border-color: #{$button-disabled-border-color},
      button-disabled-shadow: #{$button-disabled-shadow},
      button-disabled-opacity: #{$button-disabled-opacity},
      button-static-color: #{$button-static-color},
      button-static-background-color: #{$button-static-background-color},
      button-static-border-color: #{$button-static-border-color},
      button-hover-s: #{$button-hover-s},
      button-hover-l: #{$button-hover-l},
      button-active-s: #{$button-active-s},
      button-active-l: #{$button-active-l},
      button-light-l: #{$button-light-l},
      button-light-text-l: #{$button-light-text-l},
      dark-shade: #{$dark-shade},
      dark-invert-shade: #{$dark-invert-shade},
      light-shade: #{$light-shade},
      light-invert-shade: #{$light-invert-shade},
    )
  );
}

.#{$class-prefix}button {
  @extend %control;
  @extend %unselectable;

  background-color: getVar("button-background-color");
  border-color: getVar("button-border-color");
  border-width: getVar("button-border-width");
  color: getVar("button-color");
  cursor: pointer;
  font-weight: getVar("button-weight");
  justify-content: center;
  padding-bottom: getVar("button-padding-vertical");
  padding-left: getVar("button-padding-horizontal");
  padding-right: getVar("button-padding-horizontal");
  padding-top: getVar("button-padding-vertical");
  text-align: center;
  white-space: nowrap;

  @if $button-family {
    font-family: getVar("button-family");
  }

  strong {
    color: inherit;
  }

  .#{$class-prefix}icon {
    &,
    &.is-small,
    &.is-medium,
    &.is-large {
      height: 1.5em;
      width: 1.5em;
    }

    &:first-child:not(:last-child) {
      @include ltr-property(
        "margin",
        calc(
          calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
              "button-border-width"
            )}
        ),
        false
      );
      @include ltr-property(
        "margin",
        calc(#{getVar("button-padding-horizontal")} * 0.25)
      );
    }

    &:last-child:not(:first-child) {
      @include ltr-property(
        "margin",
        calc(#{getVar("button-padding-horizontal")} * 0.25),
        false
      );
      @include ltr-property(
        "margin",
        calc(
          calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
              "button-border-width"
            )}
        )
      );
    }

    &:first-child:last-child {
      margin-left: calc(
        calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
            "button-border-width"
          )}
      );
      margin-right: calc(
        calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
            "button-border-width"
          )}
      );
    }
  }

  // States
  &:hover,
  &.is-hovered {
    border-color: getVar("button-hover-border-color");
    color: getVar("button-hover-color");
  }

  &:focus-visible,
  &.is-focused {
    border-color: getVar("button-focus-border-color");
    color: getVar("button-focus-color");

    &:not(:active) {
      box-shadow: getVar("button-focus-box-shadow-size")
        getVar("button-focus-box-shadow-color");
    }
  }

  &:active,
  &.is-active {
    border-color: getVar("button-active-border-color");
    color: getVar("button-active-color");
  }

  // Colors
  &.is-text {
    background-color: transparent;
    border-color: transparent;
    color: getVar("button-text-color");
    text-decoration: getVar("button-text-decoration");

    &:hover,
    &.is-hovered,
    &:focus-visible,
    &.is-focused {
      background-color: getVar("button-text-hover-background-color");
      color: getVar("button-text-hover-color");
    }

    &:active,
    &.is-active {
      // background-color: bulmaDarken($button-text-hover-background-color, 5%); // TODO
      color: getVar("button-text-hover-color");
    }

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

  &.is-ghost {
    background: getVar("button-ghost-background");
    border-color: getVar("button-ghost-border-color");
    color: getVar("button-ghost-color");
    text-decoration: getVar("button-ghost-decoration");

    &:hover,
    &.is-hovered {
      color: getVar("button-ghost-hover-color");
      text-decoration: getVar("button-ghost-hover-decoration");
    }
  }

  @each $name, $pair in $button-colors {
    $base-h: getVar($name, "", "-h");
    $base-s: getVar($name, "", "-s");
    $base-l: getVar($name, "", "-l");
    $invert: getVar($name, "", "-invert");
    $base: hsla($base-h, var(--s), var(--l), 1);
    $button-shadow: hsla($base-h, var(--s), var(--l), 0.5);

    &.is-#{$name} {
      --base-s: #{$base-s};
      --base-l: #{$base-l};
      --s: var(--base-s);
      --l: var(--base-l);
      background-color: $base;
      border-color: transparent;
      color: $invert;

      &:hover,
      &.is-hovered {
        --s: calc(var(--base-s) + var(--bulma-button-hover-s));
        --l: calc(var(--base-l) + var(--bulma-button-hover-l));
        border-color: transparent;
        color: $invert;
      }

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

        &:not(:active) {
          box-shadow: getVar("button-focus-box-shadow-size") $button-shadow;
        }
      }

      &:active,
      &.is-active {
        --s: calc(var(--base-s) + var(--bulma-button-active-s));
        --l: calc(var(--base-l) + var(--bulma-button-active-l));
        border-color: transparent;
        color: $invert;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      &.is-light {
        --l: var(--bulma-button-light-l);
        --text-l: var(--bulma-button-light-text-l);
        // --l: var(--bulma-dark-shade);
        // background-color: getVar($name, "", "-#{$light-shade}");
        // color: $base;
        color: hsla($base-h, var(--s), var(--text-l), 1);

        &:hover,
        &.is-hovered {
          background-color: getVar($name, "", "-#{$light-shade - 5}");
          border-color: transparent;
        }

        &:active,
        &.is-active {
          background-color: getVar($name, "", "-#{$light-shade - 10}");
          border-color: transparent;
          // color: $color-dark;
        }
      }

      // If light and dark colors are provided
      // @if length($pair) >= 4 {
      //   $color-light: nth($pair, 3);
      //   $color-dark: nth($pair, 4);

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

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

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

  // Sizes
  &.is-small {
    @include button-small;
  }

  &.is-normal {
    @include button-normal;
  }

  &.is-medium {
    @include button-medium;
  }

  &.is-large {
    @include button-large;
  }

  // Modifiers
  &[disabled],
  fieldset[disabled] & {
    background-color: getVar("button-disabled-background-color");
    border-color: getVar("button-disabled-border-color");
    box-shadow: getVar("button-disabled-shadow");
    opacity: getVar("button-disabled-opacity");
  }

  &.is-fullwidth {
    display: flex;
    width: 100%;
  }

  &.is-loading {
    color: transparent !important;
    pointer-events: none;

    &::after {
      @extend %loader;
      @include center(1em);
      position: absolute !important;
    }
  }

  &.is-static {
    background-color: getVar("button-static-background-color");
    border-color: getVar("button-static-border-color");
    color: getVar("button-static-color");
    box-shadow: none;
    pointer-events: none;
  }

  &.is-rounded {
    border-radius: getVar("radius-rounded");
    padding-left: calc(#{getVar("button-padding-horizontal")} + 0.25em);
    padding-right: calc(#{getVar("button-padding-horizontal")} + 0.25em);
  }
}

.#{$class-prefix}buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .#{$class-prefix}button {
    margin-bottom: 0.5rem;

    &:not(:last-child):not(.is-fullwidth) {
      @include ltr-property("margin", 0.5rem);
    }
  }

  &:last-child {
    margin-bottom: -0.5rem;
  }

  &:not(:last-child) {
    margin-bottom: 1rem;
  }

  // Sizes
  &.are-small {
    .#{$class-prefix}button:not(.is-normal):not(.is-medium):not(.is-large) {
      @include button-small;
    }
  }

  &.are-medium {
    .#{$class-prefix}button:not(.is-small):not(.is-normal):not(.is-large) {
      @include button-medium;
    }
  }

  &.are-large {
    .#{$class-prefix}button:not(.is-small):not(.is-normal):not(.is-medium) {
      @include button-large;
    }
  }

  &.has-addons {
    .#{$class-prefix}button {
      &:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }

      &:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;

        @include ltr-property("margin", -1px);
      }

      &:last-child {
        @include ltr-property("margin", 0);
      }

      &:hover,
      &.is-hovered {
        z-index: 2;
      }

      &:focus-visible,
      &.is-focused,
      &:active,
      &.is-active,
      &.is-selected {
        z-index: 3;

        &:hover {
          z-index: 4;
        }
      }

      &.is-expanded {
        flex-grow: 1;
        flex-shrink: 1;
      }
    }
  }

  &.is-centered {
    justify-content: center;

    &:not(.has-addons) {
      .#{$class-prefix}button:not(.is-fullwidth) {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }
    }
  }

  &.is-right {
    justify-content: flex-end;

    &:not(.has-addons) {
      .#{$class-prefix}button:not(.is-fullwidth) {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }
    }
  }
}

@each $bp-name, $bp-sizes in $button-responsive-sizes {
  @include breakpoint($bp-name) {
    @each $size, $value in $bp-sizes {
      @if $size != "normal" {
        .#{$class-prefix}button.is-responsive.is-#{$size} {
          font-size: getVar("value");
        }
      } @else {
        .#{$class-prefix}button.is-responsive,
        .#{$class-prefix}button.is-responsive.is-normal {
          font-size: getVar("value");
        }
      }
    }
  }
}