@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;
  padding: 0 spacing.$spacing-xs;
  min-width: spacing.$spacing-xxl;
  vertical-align: middle;
  text-align: left;
  cursor: pointer;

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

  &:has(&__icon) {
    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 {
      padding-top: calc(spacing.$spacing-xxs / 2);
      padding-bottom: calc(spacing.$spacing-xxs / 2);
      min-height: spacing.$spacing-md;
    }

    &__medium {
      padding: calc(spacing.$spacing-md / 4) spacing.$spacing-xs;
      min-height: spacing.$spacing-lg;
    }

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

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

    &__component {
      position: relative;
      top: -50%;
    }
  }
}