@use 'sass:map';
@use '../../tokens';
@use '../../utils';

$_sizes: (
  xxs: -3,
  xs: -2,
  sm: -1,
  lg: 1,
  xl: 2,
  xxl: 3,
);

/// get component token
@function _token($token) {
  @return utils.map-get(tokens.$flexy-comp-button, $token);
}

.flexy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: _token('spacing');

  background-color: transparent;
  border: none;
  border-radius: _token('shape');
  box-sizing: border-box;
  color: currentcolor;
  cursor: pointer;
  position: relative;
  padding: 0px _token('padding');
  height: _token('height');

  font-family: tokens.$flexy-sys-typography-sans-serif;
  font-size: _token('label-size');
  line-height: 1.5;
  text-decoration: none;
  user-select: none;

  -webkit-tap-highlight-color: transparent;

  &::after {
    @include utils.touchable();
  }

  &:hover &__ripple::before {
    opacity: 0.12;
  }

  &:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }

  &--sharp {
    border-radius: 0px;
  }

  &--rounded {
    border-radius: calc(_token(height) / 2);
  }

  &--icon {
    padding: 0px;
    width: _token('height');
  }

  &--circular {
    border-radius: 50%;
    padding: 0px;
    width: _token('height');
  }

  &--primary,
  &--tonal-primary,
  &--outlined-primary {
    color: tokens.$flexy-sys-color-primary;
  }

  &--error,
  &--tonal-error,
  &--outlined-error {
    color: tokens.$flexy-sys-color-error;
  }

  &--tonal-neutral::before,
  &--tonal-primary::before,
  &--tonal-error::before {
    content: '';
    background-color: currentcolor;
    border-radius: inherit;
    opacity: 0.12;
    pointer-events: none;
    @include utils.absolute-fill();
  }

  &--outlined-neutral::before,
  &--outlined-primary::before,
  &--outlined-error::before {
    content: '';
    border-radius: inherit;
    border: 1px solid currentcolor;
    box-sizing: border-box;
    opacity: 0.2;
    pointer-events: none;
    @include utils.absolute-fill();
  }

  &--filled-neutral {
    background-color: tokens.$flexy-sys-color-on-surface;
    color: tokens.$flexy-sys-color-surface;

    &:focus-visible {
      outline-color: tokens.$flexy-sys-color-on-surface;
    }
  }

  &--filled-primary {
    background-color: tokens.$flexy-sys-color-primary;
    color: tokens.$flexy-sys-color-on-primary;

    &:focus-visible {
      outline-color: tokens.$flexy-sys-color-primary;
    }

    &[disabled] {
      background-color: tokens.$flexy-sys-color-on-surface;
      color: tokens.$flexy-sys-color-surface;
    }
  }

  &--filled-error {
    background-color: tokens.$flexy-sys-color-error;
    color: tokens.$flexy-sys-color-on-error;

    &:focus-visible {
      outline-color: tokens.$flexy-sys-color-error;
    }

    &[disabled] {
      background-color: tokens.$flexy-sys-color-on-surface;
      color: tokens.$flexy-sys-color-surface;
    }
  }

  @each $name, $size in $_sizes {
    &--#{$name} {
      height: calc(_token('height') + 4px * $size);
      padding: 0px calc(_token('padding') + 2px * $size);
    }
    &--#{$name}#{&}--icon,
    &--#{$name}#{&}--circular {
      width: calc(_token('height') + 4px * $size);
    }
  }

  &[disabled] {
    filter: grayscale(1) opacity(0.32);
    pointer-events: none;
  }
}