@use "../../../styles/base/utilities.scss";

[data-fs-button] {
  // --------------------------------------------------------
  // Design Tokens for Buttons
  // --------------------------------------------------------

  // Default properties
  --fs-button-padding                               : calc(var(--fs-spacing-1) - (var(--fs-button-border-width) * 2)) var(--fs-spacing-3);
  --fs-button-height                                : var(--fs-control-tap-size);
  --fs-button-gap                                   : var(--fs-spacing-2);

  --fs-button-shadow                                : var(--fs-shadow);
  --fs-button-shadow-hover                          : var(--fs-button-shadow);

  --fs-button-border-radius                         : var(--fs-border-radius);
  --fs-button-border-width                          : var(--fs-border-width-thick);
  --fs-button-border-color                          : transparent;

  --fs-button-text-size                             : var(--fs-text-size-base);
  --fs-button-text-weight                           : var(--fs-text-weight-bold);

  --fs-button-transition-function                   : var(--fs-transition-function);
  --fs-button-transition-property                   : var(--fs-transition-property);
  --fs-button-transition-timing                     : var(--fs-transition-timing);

  // Primary
  --fs-button-primary-text-color                    : var(--fs-color-primary-text);
  --fs-button-primary-text-color-hover              : var(--fs-button-primary-text-color);
  --fs-button-primary-text-color-active             : var(--fs-button-primary-text-color);
  --fs-button-primary-bkg-color                     : var(--fs-color-primary-bkg);
  --fs-button-primary-bkg-color-hover               : var(--fs-color-primary-bkg-hover);
  --fs-button-primary-bkg-color-active              : var(--fs-color-primary-bkg-active);
  --fs-button-primary-border-color                  : transparent;
  --fs-button-primary-border-color-hover            : var(--fs-button-primary-border-color);
  --fs-button-primary-border-color-active           : var(--fs-button-primary-border-color);
  --fs-button-primary-shadow-hover                  : var(--fs-button-shadow-hover);

  --fs-button-primary-inverse-text-color            : var(--fs-button-primary-bkg-color);
  --fs-button-primary-inverse-text-color-hover      : var(--fs-button-primary-bkg-color);
  --fs-button-primary-inverse-text-color-active     : var(--fs-button-primary-bkg-color);
  --fs-button-primary-inverse-bkg-color             : var(--fs-button-primary-text-color);
  --fs-button-primary-inverse-bkg-color-hover       : var(--fs-color-primary-bkg-light);
  --fs-button-primary-inverse-bkg-color-active      : var(--fs-color-primary-bkg-light-active);
  --fs-button-primary-inverse-border-color          : var(--fs-button-primary-border-color);
  --fs-button-primary-inverse-border-color-hover    : var(--fs-button-primary-border-color);
  --fs-button-primary-inverse-border-color-active   : var(--fs-button-primary-border-color);
  --fs-button-primary-inverse-shadow-hover          : var(--fs-button-shadow-hover);

  // Secondary
  --fs-button-secondary-text-color                  : var(--fs-color-secondary-text);
  --fs-button-secondary-text-color-hover            : var(--fs-color-text-inverse);
  --fs-button-secondary-text-color-active           : var(--fs-button-secondary-text-color-hover);
  --fs-button-secondary-bkg-color                   : var(--fs-color-secondary-bkg);
  --fs-button-secondary-bkg-color-hover             : var(--fs-color-secondary-bkg-hover);
  --fs-button-secondary-bkg-color-active            : var(--fs-color-secondary-bkg-active);
  --fs-button-secondary-border-color                : var(--fs-button-secondary-text-color);
  --fs-button-secondary-border-color-hover          : var(--fs-button-secondary-bkg-color-hover);
  --fs-button-secondary-border-color-active         : var(--fs-button-secondary-bkg-color-active);
  --fs-button-secondary-shadow-hover                : var(--fs-button-shadow-hover);

  --fs-button-secondary-inverse-text-color          : var(--fs-button-secondary-text-color-hover);
  --fs-button-secondary-inverse-text-color-hover    : var(--fs-button-secondary-text-color);
  --fs-button-secondary-inverse-text-color-active   : var(--fs-button-secondary-inverse-text-color-hover);
  --fs-button-secondary-inverse-bkg-color           : var(--fs-button-secondary-bkg-color);
  --fs-button-secondary-inverse-bkg-color-hover     : var(--fs-button-secondary-text-color-hover);
  --fs-button-secondary-inverse-bkg-color-active    : var(--fs-color-secondary-bkg-light);
  --fs-button-secondary-inverse-border-color        : var(--fs-button-secondary-inverse-text-color);
  --fs-button-secondary-inverse-border-color-hover  : var(--fs-button-secondary-inverse-bkg-color-hover);
  --fs-button-secondary-inverse-border-color-active : var(--fs-button-secondary-inverse-bkg-color-active);
  --fs-button-secondary-inverse-shadow-hover        : var(--fs-button-shadow-hover);

  // Tertiary
  --fs-button-tertiary-text-color                   : var(--fs-color-tertiary-text);
  --fs-button-tertiary-text-color-hover             : var(--fs-button-tertiary-text-color);
  --fs-button-tertiary-text-color-active            : var(--fs-button-primary-bkg-color);
  --fs-button-tertiary-bkg-color                    : var(--fs-color-tertiary-bkg);
  --fs-button-tertiary-bkg-color-hover              : var(--fs-color-tertiary-bkg-hover);
  --fs-button-tertiary-bkg-color-active             : var(--fs-color-tertiary-bkg-active);
  --fs-button-tertiary-border-color                 : transparent;
  --fs-button-tertiary-border-color-hover           : var(--fs-button-tertiary-border-color);
  --fs-button-tertiary-border-color-active          : var(--fs-button-tertiary-border-color);
  --fs-button-tertiary-shadow-hover                 : var(--fs-button-shadow-hover);

  --fs-button-tertiary-inverse-text-color           : var(--fs-button-secondary-text-color-hover);
  --fs-button-tertiary-inverse-text-color-hover     : var(--fs-button-secondary-text-color-hover);
  --fs-button-tertiary-inverse-text-color-active    : var(--fs-button-secondary-text-color-hover);
  --fs-button-tertiary-inverse-bkg-color            : var(--fs-button-secondary-inverse-bkg-color);
  --fs-button-tertiary-inverse-bkg-color-hover      : var(--fs-button-primary-bkg-color-hover);
  --fs-button-tertiary-inverse-bkg-color-active     : var(--fs-button-primary-bkg-color-active);
  --fs-button-tertiary-inverse-border-color         : var(--fs-button-tertiary-border-color);
  --fs-button-tertiary-inverse-border-color-hover   : var(--fs-button-tertiary-border-color);
  --fs-button-tertiary-inverse-border-color-active  : var(--fs-button-tertiary-border-color);
  --fs-button-tertiary-inverse-shadow-hover         : var(--fs-button-shadow-hover);

  // Disabled
  --fs-button-disabled-bkg-color                    : var(--fs-color-disabled-bkg);
  --fs-button-disabled-text-color                   : var(--fs-color-disabled-text);

  // Loading
  --fs-button-loading-label-column-gap              : var(--fs-spacing-3);

  // Small
  --fs-button-small-padding                         : var(--fs-spacing-0) var(--fs-spacing-1);
  --fs-button-small-min-height                      : var(--fs-spacing-7);
  --fs-button-small-gap                             : var(--fs-spacing-1);
  --fs-button-small-icon-width                      : var(--fs-spacing-3);
  --fs-button-small-icon-height                     : var(--fs-button-small-icon-width);

  // Icon
  --fs-button-icon-padding                          : 0 var(--fs-spacing-1);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  display: flex;
  align-items: stretch;
  width: fit-content;
  min-height: var(--fs-button-height);
  padding: 0;
  cursor: pointer;

  [data-fs-button-wrapper] {
    position: relative;
    display: inline-flex;
    column-gap: var(--fs-button-gap);
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--fs-button-padding);
    font-size: var(--fs-button-text-size);
    font-weight: var(--fs-button-text-weight);
    line-height: var(--fs-button-text-size);
    text-decoration: none;
    border: var(--fs-button-border-width) solid var(--fs-button-border-color);
    border-radius: var(--fs-button-border-radius);
    outline: none;
    box-shadow: var(--fs-button-shadow);
    transition: var(--fs-button-transition-property) var(--fs-button-transition-timing) var(--fs-button-transition-function);
  }

  // --------------------------------------------------------
  // Variants Styles
  // --------------------------------------------------------

  &[data-fs-button-variant] {

    &:focus, &:focus-visible { box-shadow: none; }

    @media not all and (min-resolution: .001dpcm) {
      @supports (-webkit-appearance:none) {
        &:focus [data-fs-button-wrapper],
        &:focus:hover [data-fs-button-wrapper] { @include utilities.focus-ring; }
      }
    }

    &:focus-visible [data-fs-button-wrapper],
    &:focus-visible:hover [data-fs-button-wrapper] { @include utilities.focus-ring; }

    &:disabled [data-fs-button-wrapper], &[data-fs-button-disabled="true"] [data-fs-button-wrapper] {
      color: var(--fs-button-disabled-text-color);
      cursor: not-allowed;
      background-color: var(--fs-button-disabled-bkg-color);
      border: 0;
      box-shadow: none;
      svg { color: var(--fs-color-neutral-5); }

      &:hover {
        color: var(--fs-button-disabled-text-color);
        background-color: var(--fs-button-disabled-bkg-color);
      }
    }
  }

  &[data-fs-button-size="small"] {
    --fs-control-tap-size: var(--fs-button-small-min-height);

    padding: var(--fs-spacing-1);

    [data-fs-button-wrapper] {
      column-gap: var(--fs-button-small-gap);
      padding: var(--fs-button-small-padding);
    }

    &:not([data-fs-icon-button="true"]) {
      [data-fs-icon] {
        width: var(--fs-button-small-icon-width);
        height: var(--fs-button-small-icon-height);
      }
    }
  }

  &[data-fs-button-variant="primary"] {
    [data-fs-button-wrapper] {
      color: var(--fs-button-primary-text-color);
      background-color: var(--fs-button-primary-bkg-color);
      border: var(--fs-button-border-width) solid var(--fs-button-primary-border-color);
    }

    &:hover [data-fs-button-wrapper] {
      color: var(--fs-button-primary-text-color-hover);
      background-color: var(--fs-button-primary-bkg-color-hover);
      border-color: var(--fs-button-primary-border-color-hover);
      box-shadow: var(--fs-button-primary-shadow-hover);
    }

    &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
      color: var(--fs-button-primary-text-color-hover);
      background-color: var(--fs-button-primary-bkg-color-hover);
    }

    &:active [data-fs-button-wrapper] {
      color: var(--fs-button-primary-text-color-active);
      background-color: var(--fs-button-primary-bkg-color-active);
      border-color: var(--fs-button-primary-border-color-active);
    }

    &[data-fs-button-inverse="true"] {
      [data-fs-button-wrapper] {
        color: var(--fs-button-primary-inverse-text-color);
        background-color: var(--fs-button-primary-inverse-bkg-color);
        border: var(--fs-button-border-width) solid var(--fs-button-primary-inverse-border-color);
      }

      &:hover [data-fs-button-wrapper] {
        color: var(--fs-button-primary-inverse-text-color-hover);
        background-color: var(--fs-button-primary-inverse-bkg-color-hover);
        border-color: var(--fs-button-primary-inverse-border-color-hover);
        box-shadow: var(--fs-button-primary-inverse-shadow-hover);
      }

      &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
        color: var(--fs-button-primary-inverse-text-color-hover);
        background-color: var(--fs-button-primary-inverse-bkg-color-hover);
      }

      &:active [data-fs-button-wrapper] {
        color: var(--fs-button-primary-inverse-text-color-active);
        background-color: var(--fs-button-primary-inverse-bkg-color-active);
        border-color: var(--fs-button-primary-inverse-border-color-active);
      }
    }
  }

  &[data-fs-button-variant="secondary"] {
    [data-fs-button-wrapper] {
      color: var(--fs-button-secondary-text-color);
      background-color: var(--fs-button-secondary-bkg-color);
      border: var(--fs-button-border-width) solid var(--fs-button-secondary-border-color);
    }

    &:hover [data-fs-button-wrapper] {
      color: var(--fs-button-secondary-text-color-hover);
      background-color: var(--fs-button-secondary-bkg-color-hover);
      border-color: var(--fs-button-secondary-border-color-hover);
      box-shadow: var(--fs-button-secondary-shadow-hover);
    }

    &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
      color: var(--fs-button-secondary-text-color-hover);
      background-color: var(--fs-button-secondary-bkg-color-hover);
    }

    &:active [data-fs-button-wrapper] {
      color: var(--fs-button-secondary-text-color-active);
      background-color: var(--fs-button-secondary-bkg-color-active);
      border-color: var(--fs-button-secondary-border-color-active);
    }

    &[data-fs-button-inverse="true"] {
      [data-fs-button-wrapper] {
        color: var(--fs-button-secondary-inverse-text-color);
        background-color: var(--fs-button-secondary-inverse-bkg-color);
        border: var(--fs-button-border-width) solid var(--fs-button-secondary-inverse-border-color);
      }

      &:hover [data-fs-button-wrapper] {
        color: var(--fs-button-secondary-inverse-text-color-hover);
        background-color: var(--fs-button-secondary-inverse-bkg-color-hover);
        border-color: var(--fs-button-secondary-inverse-border-color-hover);
        box-shadow: var(--fs-button-secondary-inverse-shadow-hover);
      }

      &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
        color: var(--fs-button-secondary-inverse-text-color-hover);
        background-color: var(--fs-button-secondary-inverse-bkg-color-hover);
      }

      &:active [data-fs-button-wrapper] {
        color: var(--fs-button-secondary-inverse-text-color-active);
        background-color: var(--fs-button-secondary-inverse-bkg-color-active);
        border-color: var(--fs-button-secondary-inverse-border-color-active);
      }
    }
  }

  &[data-fs-button-variant="tertiary"] {
    [data-fs-button-wrapper] {
      color: var(--fs-button-tertiary-text-color);
      background-color: var(--fs-button-tertiary-bkg-color);
      border: var(--fs-button-border-width) solid var(--fs-button-tertiary-border-color);
    }

    &:hover [data-fs-button-wrapper] {
      color: var(--fs-button-tertiary-text-color-hover);
      background-color: var(--fs-button-tertiary-bkg-color-hover);
      border-color: var(--fs-button-tertiary-border-color-hover);
      box-shadow: var(--fs-button-tertiary-shadow-hover);
    }

    &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
      color: var(--fs-button-tertiary-text-color-hover);
      background-color: var(--fs-button-tertiary-bkg-color-hover);
    }

    &:disabled [data-fs-button-wrapper],
    &:hover:disabled [data-fs-button-wrapper] { background-color: transparent; }

    &:active [data-fs-button-wrapper] {
      color: var(--fs-button-tertiary-text-color-active);
      background-color: var(--fs-button-tertiary-bkg-color-active);
      border-color: var(--fs-button-tertiary-border-color-active);
    }

    &[data-fs-button-inverse="true"] {
      [data-fs-button-wrapper] {
        color: var(--fs-button-tertiary-inverse-text-color);
        background-color: var(--fs-button-tertiary-inverse-bkg-color);
        border: var(--fs-button-border-width) solid var(--fs-button-tertiary-inverse-border-color);
      }

      &:hover [data-fs-button-wrapper] {
        color: var(--fs-button-tertiary-inverse-text-color-hover);
        background-color: var(--fs-button-tertiary-inverse-bkg-color-hover);
        border-color: var(--fs-button-tertiary-inverse-border-color-hover);
        box-shadow: var(--fs-button-tertiary-inverse-shadow-hover);
      }

      &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
        color: var(--fs-button-tertiary-inverse-text-color-hover);
        background-color: var(--fs-button-tertiary-inverse-bkg-color-hover);
      }

      &:active [data-fs-button-wrapper] {
        color: var(--fs-button-tertiary-inverse-text-color-active);
        background-color: var(--fs-button-tertiary-inverse-bkg-color-active);
        border-color: var(--fs-button-tertiary-inverse-border-color-active);
      }
    }
  }

  &[data-fs-icon-button="true"] {
    width: var(--fs-button-height);

    [data-fs-button-wrapper] {
      column-gap: 0;
      width: 100%;
      padding: 0;
      border-width: 0;
    }
  }

  &[data-fs-button-loading="true"] [data-fs-button-wrapper] {
    > * {
      pointer-events: none;
      opacity: 0;
    }

    [data-fs-button-loading-label] {
      position: absolute;
      display: flex;
      column-gap: var(--fs-button-loading-label-column-gap);
      opacity: 1;
    }
  }
}