@use '@angular/material' as mat;

@mixin layout-theme($theme) {
  .mat-mdc-nav-list .mat-mdc-list-item.active:not(.disabled) {
    background-color: mat.get-theme-color($theme, secondary-container);
    color: mat.get-theme-color($theme, on-secondary-container);
  }

  a:link:not(.mdc-button) {
    color: mat.get-theme-color($theme, secondary, 60);
  }

  .mat-mdc-form-field {
    .mat-mdc-form-field-icon-suffix devmx-icon {
      margin-right: 8px;
    }
  }

  .layout-container {
    background-color: rgba(mat.get-theme-color($theme, surface-variant), 1);

    .layout-content {
      .mdc-linear-progress__bar-inner {
        border-color: mat.get-theme-color($theme, secondary, 70);
      }
    }
  }

  .layout-sidenav-end {
    background: mat.get-theme-color($theme, surface-container-low);

    .mat-mdc-card {
      height: 100%;
      box-shadow: none;
      background-color: transparent;

      &-header {
        top: 0;
        position: sticky;
        background-color: rgba(
          mat.get-theme-color($theme, surface-container-low),
          0.75
        );
        z-index: 1000;

        .mat-mdc-card-header-text {
          max-width: calc(100% - 6em);
          flex: 1;
        }
      }

      &-title {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      &-content {
        h1 {
          font-size: 1.6em;
        }

        h2 {
          font-size: 1.4em;
        }

        h3 {
          font-size: 1.2em;
        }

        h4 {
          font-size: 1em;
        }

        h5 {
          font-size: 0.8em;
        }
      }
    }
  }

  .mat-drawer-inner-container .mat-expansion-panel-header-title {
    opacity: 0.4;
  }

  .mat-expansion-panel-header {
    padding: 0 1.4em;
    margin: 0;

    &.mat-expanded {
      height: 3em;
    }
  }

  .layout-main-wrapper {
    background-color: rgba(
      mat.get-theme-color($theme, surface-container-lowest),
      0.75
    );

    .mat-mdc-paginator {
      background-color: transparent;
    }
  }
  .layout-content {
    @media (pointer: fine) {
      &::-webkit-scrollbar-thumb {
        background-color: mat.get-theme-color($theme, primary);
      }
    }
  }
}
