@use '../../styles/mixins';
@use '../../styles/typography';
@use '../../styles/variables';

// Button mini size constants
$button-mini-height: 24px;
$button-mini-width: 44px;
$button-mini-padding: 0 8px;

@mixin custom-colored-button($base, $on-base: #fff, $hover: null, $outlined-text: null) {
  $hover: if($hover == null, if(type-of($base) ==color, darken($base, 5%), $base), $hover);
  $outline-text: if(
    $outlined-text ==null,
    if(type-of($base) ==color, darken($base, 25%), $base),
    $outlined-text
  );
  $overlay: if(type-of($base) ==color, rgba($base, 0.08), rgba(0, 0, 0, 0.08));

  &.mat-mdc-raised-button,
  &.mat-mdc-unelevated-button {
    --mdc-text-button-label-text-color: $on-base;
    --mdc-protected-button-label-text-color: $on-base;
    --mdc-filled-button-label-text-color: $on-base;
    --mdc-outlined-button-label-text-color: $outline-text;
    background-color: $base;
    color: $on-base;

    &:hover:not([disabled]) {
      background-color: $hover;
    }
  }

  &.mat-mdc-button {
    --mdc-text-button-label-text-color: $on-base;
    --mdc-protected-button-label-text-color: $on-base;
    --mdc-filled-button-label-text-color: $on-base;
    --mdc-outlined-button-label-text-color: $outline-text;
    background-color: $base;
    color: $on-base;

    &:hover:not([disabled]) {
      background-color: $hover;
    }

    &[disabled] {
      background-color: transparent;
      color: var(--mdc-text-button-disabled-label-text-color);
    }
  }

  &.mat-mdc-raised-button[disabled] {
    background-color: var(--mdc-protected-button-disabled-container-color);
    color: var(--mdc-protected-button-disabled-label-text-color);
  }

  &.mat-mdc-unelevated-button[disabled] {
    background-color: var(--mdc-filled-button-disabled-container-color);
    color: var(--mdc-filled-button-disabled-label-text-color);
  }

  &.mat-mdc-outlined-button {
    background-color: transparent;
    color: $outline-text;

    &:hover:not([disabled]) {
      background-color: $overlay;
    }

    &[disabled] {
      border-color: var(--mdc-outlined-button-disabled-outline-color);
      color: var(--mdc-outlined-button-disabled-label-text-color);
    }
  }

  &.mat-mdc-icon-button,
  &.mat-mdc-fab,
  &.mat-mdc-mini-fab {
    --mdc-icon-button-icon-color: $base;
    --mdc-fab-container-color: $base;
    --mat-fab-foreground-color: $on-base;
    background-color: $base;
    color: $on-base;

    &:hover:not([disabled]) {
      background-color: $hover;
    }
  }

  &.mat-mdc-fab[disabled],
  &.mat-mdc-mini-fab[disabled] {
    background-color: var(--mdc-fab-disabled-container-color);
    color: var(--mdc-fab-disabled-icon-color);
  }

  &.mat-mdc-icon-button {
    background-color: transparent;
    color: $base;

    &:hover:not([disabled]) {
      background-color: $overlay;
    }

    &[disabled] {
      background-color: transparent;
      color: var(--mdc-icon-button-disabled-icon-color);
    }
  }
}

:host {
  --mdc-shape-small: 8px;

  &.full-width {
    width: 100%;

    button {
      width: 100%;
    }
  }

  .spinner-container {
    @include mixins.flexCentering;
    gap: 6px;
  }

  /* Mini size variant: fixed compact size per spec */
  .size-mini {
    @include typography.text-xs;
    height: $button-mini-height !important;
    min-height: $button-mini-height !important;
    min-width: $button-mini-width !important;
    padding: $button-mini-padding !important;

    --mdc-text-button-container-height: #{$button-mini-height};
    --mdc-protected-button-container-height: #{$button-mini-height};
    --mdc-filled-button-container-height: #{$button-mini-height};
    --mdc-outlined-button-container-height: #{$button-mini-height};
    --mdc-text-button-container-shape: 4px;
    --mdc-protected-button-container-shape: 4px;
    --mdc-filled-button-container-shape: 4px;
    --mdc-outlined-button-container-shape: 4px;
    border-radius: 4px !important;

    ::ng-deep .mdc-button__ripple {
      border-radius: 4px !important;
    }

    .mdc-button__label {
      line-height: $button-mini-height;
    }

    .mdc-circular-progress {
      @include mixins.square(13px);
    }

    > .mat-icon {
      @include mixins.square(0.9rem);
      font-size: 0.9rem;
      margin-right: 4px;
    }
  }

  /* Custom colors */
  .color-success {
    @include custom-colored-button(variables.$green, variables.$white, variables.$green-darker);
  }

  .color-caution {
    @include custom-colored-button(variables.$yellow, variables.$white, variables.$yellow-darker);
  }
}