@use "@angular/material" as mat;

@import "./sc-mixins";
@import "./sc-variables";

@mixin sc-buttons-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $success: map-get($theme, success);
  $warning: map-get($theme, warning);
  $danger: map-get($theme, danger);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $scForeground: map-get($theme, sc-foreground);
  $scBackground: map-get($theme, sc-background);

  //? additional state colors (success/warning/danger) — enables the use of color attribute in buttons

  .mat-muted {
    &.mat-button,
    &.mat-stroked-button,
    &.mat-icon-button {
      color: mat.get-color-from-palette($foreground, secondary-text);

      // .mat-button-focus-overlay {
      //   background-color: mat.get-color-from-palette($success, 500);
      // }
    }

    &.mat-flat-button,
    &.mat-mini-fab,
    &.mat-fab {
      background: mat.get-color-from-palette($background, hover);
      color: mat.get-color-from-palette($foreground, secondary-text);
    }
  }

  .mat-success {
    &.mat-button,
    &.mat-stroked-button,
    &.mat-icon-button {
      color: mat.get-color-from-palette($success, 500);

      .mat-button-focus-overlay {
        background-color: mat.get-color-from-palette($success, 500);
      }
    }

    &.mat-flat-button,
    &.mat-mini-fab,
    &.mat-fab {
      background: mat.get-color-from-palette($success, 500);
      color: mat.get-contrast-color-from-palette($success, 500);
    }
  }

  .mat-warning {
    &.mat-button,
    &.mat-stroked-button,
    &.mat-icon-button {
      color: mat.get-color-from-palette($warning, 500);

      .mat-button-focus-overlay {
        background-color: mat.get-color-from-palette($warning, 500);
      }
    }

    &.mat-flat-button,
    &.mat-mini-fab,
    &.mat-fab {
      background: mat.get-color-from-palette($warning, 500);
      color: mat.get-contrast-color-from-palette($warning, 500);
    }
  }

  .mat-danger {
    &.mat-button,
    &.mat-stroked-button,
    &.mat-icon-button {
      color: mat.get-color-from-palette($danger, 500);

      .mat-button-focus-overlay {
        background-color: mat.get-color-from-palette($danger, 500);
      }
    }

    &.mat-flat-button,
    &.mat-mini-fab,
    &.mat-fab {
      background: mat.get-color-from-palette($danger, 500);
      color: mat.get-contrast-color-from-palette($danger, 500);
    }
  }

  .btn {
    &-inline {
      margin: 2px 0 !important;
      padding: 0.5em !important;
    }

    &__ghost-card {
      background-color: rgba(mat.get-color-from-palette($background, card), 0.75);

      &:hover {
        border-color: mat.get-color-from-palette($primary, 500);
        background-color: rgba(mat.get-color-from-palette($background, card), 1);
      }

      &--primary {
        color: mat.get-color-from-palette($primary, 500);

        &:hover {
          color: mat.get-color-from-palette($primary, 600);
        }
      }

      &--accent {
        color: mat.get-color-from-palette($accent, 500);
        border-color: mat.get-color-from-palette($accent, 500);

        &:hover {
          color: mat.get-color-from-palette($accent, 600);
        }
      }

      &--success {
        color: mat.get-color-from-palette($success, 500);
        border-color: mat.get-color-from-palette($success, 500);

        &:hover {
          color: mat.get-color-from-palette($success, 600);
        }
      }

      &--warning {
        color: mat.get-color-from-palette($warning, 500);
        border-color: mat.get-color-from-palette($warning, 500);

        &:hover {
          color: mat.get-color-from-palette($warning, 600);
        }
      }

      &--danger {
        color: mat.get-color-from-palette($danger, 500);
        border-color: mat.get-color-from-palette($danger, 500);

        &:hover {
          color: mat.get-color-from-palette($danger, 600);
        }
      }
    }
  }

  //* Checkbox
  //   .sc-checkbox-button {
  //     font-family: IBM Plex Sans Condensed;
  //     font-size: 14px;
  //     line-height: 36px;
  //     font-weight: 500;
  //     text-transform: uppercase;

  //     &__input {

  //       // &:checked + .sc-checkbox-button__surface {
  //       //   .checkbox-stroked-icon-button__check-icon {

  //       //   }
  //       // }

  //       &:focus + .sc-checkbox-button__surface{
  //         background-color: mat.get-color-from-palette($primary, 700);
  //         transition: background-color 200ms $ease-in-out-curve-function;
  //       }
  //     }

  //     &__surface {
  //       background-color: mat.get-color-from-palette($primary, 500);
  //       color: mat.get-contrast-color-from-palette($primary, 500);
  //     }

  //     &__focus-overlay {
  //       background-color: black;
  //     }
  //   }
}