@use '../core/style/spacing' as *;
@use '../icon/icon' as *;

$button-radius-dense: 18px;
$button-radius-base: 18px;
$button-radius-large: 24px;

$button-height-dense: 30px;
$button-height-large: 44px;

$button-icon-size-dense: 14px;
$button-icon-size-base: 18px;
$button-icon-size-large: $uxg-spacing-4;

$mat-icon-button-size-dense: 30px;

@mixin button-base($radius, $icon-size) {
  &[mat-button],
  &[mat-raised-button],
  &[mat-stroked-button],
  &[mat-flat-button] {
    border-radius: $radius;

    .mat-icon {
      @include icon-size($icon-size);
    }
  }
}

a,
button {
  @include button-base($button-radius-base, $button-icon-size-base);

  &.mat-mdc-icon-button {
    display: inline-flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;

    &:hover:not(.mat-button-disabled) .mat-button-focus-overlay {
      opacity: 0.04;
    }
  }
  .mdc-button__label {
    display: flex;
    align-items: center;
  }
}

button[dense],
a[dense],
*[dense] button {
  &.mdc-button.mat-mdc-button-base {
    @include button-base($button-radius-dense, $button-icon-size-dense);
    height: $button-height-dense;
  }
  &.mat-mdc-icon-button.mat-mdc-button-base {
    @include icon-size($mat-icon-button-size-dense);
    padding: 0;

    .mat-icon {
      @include icon-size($button-icon-size-base);
    }
  }
}

button[large],
a[large],
*[large] button {
  &.mdc-button.mat-mdc-button-base {
    @include button-base($button-radius-large, $button-icon-size-large);
    height: $button-height-large;
  }
}