@use "sass:map";
@use '~@angular/material' as mat;

@import "../common/base-styles.theme";

@mixin ql-chip-theme($theme, $overrides: ()) {

  $config: mat.get-color-config($theme);
  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  $ql-chip-values: (
          width: fit-content,
          height: 100%,
  );

  $ql-chip-values: map.merge($ql-chip-values, $overrides);

  ql-chip {
    @include extract-style-map($ql-chip-values);


    .ql-chip {
      @include mat.elevation(4);
      @include base-size-style($ql-chip-values);
      transition-duration: 150ms;
      transition-timing-function: linear;
      transition-property: border;

      &.primary {
        background-color: mat.get-color-from-palette($primary, 500);
        color: mat.get-contrast-color-from-palette($primary, 500);
        border: .1rem solid mat.get-color-from-palette($primary, 100);

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

      &.ascent {
        background-color: mat.get-color-from-palette($ascent, 500);
        color: mat.get-contrast-color-from-palette($ascent, 500);
        border: .1rem solid mat.get-color-from-palette($ascent, 100);

        &:hover {
          border: .1rem solid mat.get-color-from-palette($ascent, 600);
        }
      }

      display: grid;
      grid-template-areas: "icon text";
      grid-template-rows: 1fr;
      grid-template-columns: minmax(1.6rem, 0.2fr) 1fr;
      place-items: center;
      padding: .1rem;

      > mat-icon {
        grid-area: icon;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      > span {
        grid-area: text;
        display: flex;
      }
    }
  }
}