@use '../../foundations/colors/mixins.scss' as colorMixin;
@use '../../foundations/focus/mixins.scss' as focus;
@use '../../foundations/borders/mixins.scss' as border;
@use '../../foundations/typography/mixins.scss' as typography;
@use '../../foundations/spacing/tokens.scss' as spacing;
@use '../../foundations/utilities/mixins.scss' as utilities;

.fudis-button {
  @include utilities.box-reset;
  @include border.border-radius('2px');
  @include colorMixin.bg-color('transparent');
  @include typography.button-typography;
  @include border.border('2px', 'solid', 'primary');

  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 spacing.$spacing-xs;
  min-width: spacing.$spacing-xxl;
  vertical-align: middle;

  &:focus {
    @include focus.focus-generic;
  }

  &:has(&__icon):not(&__label--hidden) {
    padding-left: 0;
  }

  &[aria-disabled='true'] &__icon__component {
    @include colorMixin.text-color('gray-dark');
  }

  &[aria-disabled='true'] {
    @include colorMixin.text-color('gray-dark');
    @include colorMixin.bg-color('gray-light');
    @include border.border('2px', 'solid', 'transparent');
    @include border.outline('1px', 'dashed', 'gray-middle');
  }

  &__primary {
    @include colorMixin.text-color('white');
    @include colorMixin.bg-color('primary');
  }

  &__secondary {
    @include colorMixin.text-color('primary');
    @include colorMixin.bg-color('white');
  }

  &__tertiary {
    @include colorMixin.text-color('primary');
    @include border.border('2px', 'solid', 'transparent');
  }

  &__size {
    &__small {
      min-height: spacing.$spacing-md;
    }

    &__medium {
      min-height: spacing.$spacing-lg;
    }

    &__icon-only {
      padding: 0;
      width: spacing.$spacing-lg;
      min-width: initial;
      min-height: spacing.$spacing-lg;
    }
  }

  &__label {
    &--hidden {
      padding: 0 spacing.$spacing-xs;
    }
  }

  &__icon {
    position: relative;
    width: spacing.$spacing-lg;
    height: spacing.$spacing-sm;

    &__component {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}