@use '../../helpers';
@use '../../mixins';

@mixin Button() {
  @if not mixins.includes('Button') {
    @include _Button();
  }
}

@mixin _Button() {
  $border-width: 1px;

  .ods-button {
    @include helpers.font('300-regular');
    @include mixins.interactive();

    align-items: center;
    appearance: none;
    background-color: transparent;
    border: $border-width solid transparent;
    border-radius: helpers.border-radius('medium');
    box-sizing: border-box;
    display: inline-grid;
    gap: helpers.space(1);
    grid-auto-flow: column;
    justify-content: center;
    padding: helpers.space(1.5) - $border-width helpers.space(3) - $border-width;
    position: relative;
    text-decoration: none;
    width: fit-content;

    > * {
      box-sizing: inherit;
    }

    &.-action--primary {
      background-color: helpers.color('background-action');
      color: helpers.color('content-on-action');

      /* stylelint-disable max-nesting-depth */
      @media (hover: hover) {
        &:hover {
          background-color: helpers.color('background-action-hover');
        }
      }
      /* stylelint-enable max-nesting-depth */

      &:active {
        background-color: helpers.color('background-action-active');
      }
    }

    &.-action--secondary {
      border-color: helpers.color('border-action');

      /* stylelint-disable max-nesting-depth */
      @media (hover: hover) {
        &:hover {
          border-color: helpers.color('border-action-hover');
        }
      }
      /* stylelint-enable max-nesting-depth */

      &:active {
        border-color: helpers.color('border-action-hover');
      }
    }

    &.-action--secondary,
    &.-action--tertiary {
      color: helpers.color('content-action');

      /* stylelint-disable max-nesting-depth */
      @media (hover: hover) {
        &:hover {
          background-color: helpers.color('background-action-subtle-hover');
        }
      }
      /* stylelint-enable max-nesting-depth */

      &:active {
        background-color: helpers.color('background-action-subtle');
      }
    }

    &.-action--primary,
    &.-action--secondary,
    &.-action--tertiary {
      @include mixins.with-inner-focus('action', $border-width);
    }

    &.-destructive--primary {
      background-color: helpers.color('background-negative');
      color: helpers.color('content-always-light');

      /* stylelint-disable max-nesting-depth */
      @media (hover: hover) {
        &:hover {
          background-color: helpers.color('background-negative-hover');
        }
      }
      /* stylelint-enable max-nesting-depth */

      &:active {
        background-color: helpers.color('background-negative-active');
      }
    }

    &.-destructive--secondary {
      border-color: helpers.color('border-negative');
    }

    &.-destructive--secondary,
    &.-destructive--tertiary {
      color: helpers.color('content-negative');

      /* stylelint-disable max-nesting-depth */
      @media (hover: hover) {
        &:hover {
          background-color: helpers.color('background-negative-subtle-hover');
        }
      }
      /* stylelint-enable max-nesting-depth */

      &:active {
        background-color: helpers.color('background-negative-subtle');
      }
    }

    &.-destructive--primary,
    &.-destructive--secondary,
    &.-destructive--tertiary {
      @include mixins.with-inner-focus('negative', $border-width);
    }

    &:disabled {
      color: helpers.color('content-disabled');
    }

    &.-action--primary,
    &.-destructive--primary {
      &:disabled {
        background-color: helpers.color('background-disabled');
      }
    }

    &.-action--secondary,
    &.-destructive--secondary {
      &:disabled {
        border-color: helpers.color('border-disabled');
      }
    }

    &.-action--secondary,
    &.-action--tertiary,
    &.-destructive--secondary,
    &.-destructive--tertiary {
      &:disabled {
        background-color: transparent;
      }
    }
  }
}