/*
 * 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;

.mat-sidenav-container {
  .mat-sidenav {
    height: calc(100vh - var(--mat-toolbar-standard-height));
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: width;
    .nav-button {
      @apply cursor-pointer;
      height: var(--mdc-list-list-item-one-line-container-height);
      min-width: var(--mdc-list-list-item-one-line-container-height);
      border: solid 1px transparent;
      &:focus {
        border-top: var(--mat-sys-on-secondary) solid 1px;
        border-bottom: var(--mat-sys-on-secondary) solid 1px;
        @media (prefers-color-scheme: light) {
          background-color: var(--mat-sys-primary-inverse);
        }
        @media (prefers-color-scheme: dark) {
          background-color: var(--mat-sys-surface);
        }
      }
      &:hover {
        background-color: var(--mat-sys-surface);
        @media (prefers-color-scheme: light) {
          background-color: var(--mat-sys-inverse-primary);
        }
        @media (prefers-color-scheme: dark) {
          background-color: var(--mat-sys-surface);
        }
      }
      .mat-icon {
        color: var(--mat-sys-on-secondary);
      }
    }
    .mat-mdc-icon-button{
      &.resized {
        padding-left: var(--tw-4);
        padding-right: var(--tw-4);
      }
    }
    .mat-divider {
      box-shadow: 0 0 4px var(--mat-sys-primary);
    }
  }
  .mat-sidenav-content {
    height: calc(100vh - var(--mat-toolbar-standard-height) - 2rem);
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: margin-left;
    padding: var(--tw-4);
    margin-left: var(--tz-sidenav-width);
  }
}

@mixin tokens-overrides() {
  @include mat.sidenav-overrides((
    content-background-color: transparent,
    container-divider-color: var(--mat-sys-outline),
    container-shape: var(--mat-sys-corner-medium),
  ));
  .mat-sidenav {
    @include mat.sidenav-overrides((
      container-shape: 0px,
      container-width: var(--tz-sidenav-width),
      container-background-color: var(--mat-sys-surface-dim),
      container-divider-color: var(--mat-sys-background),
    ));
    @media (prefers-color-scheme: light) {
      @include mat.sidenav-overrides((
        container-text-color: var(--mat-sys-surface),
      ));
    }
    @media (prefers-color-scheme: dark) {
      @include mat.sidenav-overrides((
        container-text-color: var(--mat-sys-on-surface),
      ));
    }
    @include mat.divider-overrides((
      color: var(--mat-sys-primary)
    ));
    @include mat.icon-button-overrides((
      state-layer-color: transparent,
      disabled-state-layer-color: transparent,
      ripple-color: transparent,
    ));
    .mat-mdc-icon-button {
      &:focus {
        outline: 0px;
        background-color: transparent;
      }
    }
  }
}
