/*
 * Copyright (C) 2024 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;

$list-item-spacing: 12px;

body {
  .mdc-list {
    padding: 0;
    .mdc-list-item {
      --mat-ripple-color: rgba(0,0,0,0.12);
      &.resized {
        padding-left: $list-item-spacing;
        padding-right: $list-item-spacing;
      }
    }
    &.mat-mdc-selection-list.mat-mdc-list-base .mdc-list-item {
      @apply py-1;
    }
  }
  .mat-mdc-nav-list {
    @apply flex flex-col gap-0.5;
    .mdc-list-item {
      &:hover {
        @apply no-underline;
      }
      &:focus {
        outline: 1px solid var(--mat-sys-primary);
      }
      @media (prefers-color-scheme: dark) {
        .mat-icon {
          color: var(--mat-sys-on-primary);
        }
        &:hover {
          background-color: var(--mat-sys-surface);
        }
        &:focus {
          background-color: var(--mat-sys-surface);
        }
      }
      @media (prefers-color-scheme: light) {
        .mat-icon {
          color: var(--mat-sys-on-primary);
        }
        &:hover {
          background-color: var(--mat-sys-inverse-primary);
        }
        &:focus {
          background-color: var(--mat-sys-inverse-primary);
        }
      }
    }
  }
}
@mixin tokens-overrides() {
  @include mat.list-overrides((
    list-item-one-line-container-height: 32px,
  ));
  @include mat.list-overrides((
    list-item-container-shape: var(--mat-sys-corner-medium),
    active-indicator-shape: var(--mat-sys-corner-medium),
    list-item-label-text-size: var(--mat-sys-label-large-size),
    list-item-label-text-line-height: var(--mat-sys-label-large-line-height),
    list-item-leading-icon-start-space: $list-item-spacing,
    list-item-leading-icon-end-space: $list-item-spacing,
  ));
  .mat-mdc-nav-list {
    @include mat.list-overrides((
      list-item-container-color: var(--mat-sys-dim),
      list-item-container-shape: 0px,
      active-indicator-shape: 0px,
      list-item-hover-state-layer-opacity: 0,
      list-item-focus-state-layer-opacity: 0,
    ));
    @media (prefers-color-scheme: dark) {
      @include mat.list-overrides((
        active-indicator-color: var(--mat-sys-surface),
        list-item-label-text-color: var(--mat-sys-on-surface),
        list-item-hover-label-text-color: var(--mat-sys-on-surface),
        list-item-focus-label-text-color: var(--mat-sys-on-surface),
      ));
    }
    @media (prefers-color-scheme: light) {
      @include mat.list-overrides((
        active-indicator-color: var(--mat-sys-inverse-primary),
        list-item-label-text-color: var(--mat-sys-surface),
        list-item-hover-label-text-color: var(--mat-sys-surface),
        list-item-focus-label-text-color: var(--mat-sys-surface),
      ));
    }
  }
  .mat-mdc-selection-list {
    @include mat.list-overrides((
      list-item-hover-state-layer-opacity: 0.15,
      list-item-focus-state-layer-opacity: 0.15,
      list-item-one-line-container-height: auto,
      list-item-hover-state-layer-color: var(--mat-sys-primary),
      list-item-focus-state-layer-color: var(--mat-sys-primary),
      list-item-label-text-color: var(--mat-sys-on-primary-container),
      list-item-hover-label-text-color: var(--mat-sys-on-primary-container),
      list-item-focus-label-text-color: var(--mat-sys-on-primary-container),
    ));
  }
}
