/*
 * Copyright (C) 2024-2025 BIRU
 *
 * This file is part of Tenzu.
 *
 * Tenzu is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <https://www.gnu.org/licenses/>.
 *
 * You can contact BIRU at ask@biru.sh
 *
 */


@use '@angular/material' as mat;
@use 'm3-theme' as theme;
@use '_mixin' as mixin;


.primary-button {
  @include mixin.button-variant(var(--mat-sys-primary), var(--mat-sys-primary-container), var(--mat-sys-on-primary-container));
}

.secondary-button {
  @include mixin.button-variant(var(--mat-sys-secondary), var(--mat-sys-secondary-container), var(--mat-sys-on-secondary-container));
}

.tertiary-button {
  @include mixin.button-variant(var(--mat-sys-tertiary), var(--mat-sys-tertiary-container), var(--mat-sys-on-tertiary-container));
}

.warning-button {
  @include mixin.button-variant(var(--mat-sys-warning), var(--mat-sys-warning-container), var(--mat-sys-on-warning-container));
}
.error-button {
  @include mixin.button-variant(var(--mat-sys-error), var(--mat-sys-error-container), var(--mat-sys-on-error-container));
}

.mdc-button {
  &.primary-button .mdc-button__label, &.secondary-button .mdc-button__label, &.tertiary-button .mdc-button__label, &.warning-button .mdc-button__label, &.error-button .mdc-button__label {
    z-index: 0;
  }
}


.mat-mdc-icon-button {

  @include mixin.icon-button-size(24px, 32px); // need to use a mixin because of a angular bug (see  https://github.com/angular/components/issues/30448)
  
  &.mat-mdc-button-base .mat-mdc-button-persistent-ripple::before {
    opacity: 0.1;
  }

  &.icon-sm {
    @include mixin.icon-button-size(16px, 24px);
  }

  &.icon-md {
    @include mixin.icon-button-size(24px, 32px);
  }

  &.icon-lg {
    @include mixin.icon-button-size(32px, 40px);
  }

  &.icon-xl {
    @include mixin.icon-button-size(48px, 56px);
  }
}

@mixin tokens-overrides() {
  @include mat.button-overrides((
    filled-container-shape: var(--mat-sys-corner-medium),
    outlined-container-shape: var(--mat-sys-corner-medium),
    filled-container-height: 32px,
    outlined-container-height: 32px,
    filled-horizontal-padding: 12px,
    outlined-horizontal-padding: 12px,
    outlined-icon-spacing: 4px,
    filled-icon-spacing: 4px,
    filled-hover-state-layer-opacity: 0.25,
    outlined-hover-state-layer-opacity: 0.25,
    filled-focus-state-layer-opacity: 0.25,
    outlined-focus-state-layer-opacity: 0.25,
    filled-disabled-container-color: var(--mat-sys-on-surface-variant),
    filled-disabled-label-text-color: var(--mat-sys-outline),
    outlined-disabled-label-text-color: var(--mat-sys-outline),
    outlined-disabled-outline-color: var(--mat-sys-outline-variant),
    filled-label-text-size : var(--mat-sys-label-large-size),
    outlined-label-text-size:  var(--mat-sys-label-large-size),
    filled-label-text-weight : var(--mat-sys-label-large-weight),
    outlined-label-text-weight:  var(--mat-sys-label-large-weight),
  ));
  @include mat.icon-button-overrides((
    state-layer-color: var(--mat-sys-on-secondary),
    hover-state-layer-opacity: 0.2,
    focus-state-layer-opacity: 0.1,
    icon-color: var(--mat-sys-on-secondary)
  ));
}


