@use "variables" as *;
// Custom Theming for Angular Material
@use '@angular/material' as mat;

@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";

@import 'material-icons/iconfont/filled.css';


// --------------------------------------------------------------------------------
// Photoswipe:

@import 'photoswipe/dist/photoswipe.css';

.pswp {
  --pswp-root-z-index: 1000
}

.pswp-video-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.pswp-video {
  width: 100%;
  height: 100%;
  &:focus {
    outline: none;
  }
}

.pswp-audio-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pswp-audio {
  width: 80%;
}

.pswp-video-placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pswp-video ~ .pswp-video-placeholder {
  display: none;
}

.pswp-error-text {
  margin-top: 8px;
  text-align: center;
  display: block;
}

.pswp-error-thumb {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.pswp__button {
  width: 40px;
  .material-icons {
    color: var(--pswp-icon-color);
    text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  }
}

.pswp__button--custom-close {
  //margin-right: 16px;
}

.pswp__counter {
  margin-left: 0px;
}

.pswp__zoom-level {
  height: 30px;
  margin: 15px 0 0 16px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
	user-select: none;
}

.pswp__top-bar {
  padding-left: 16px;
  padding-right: 16px;
}


// --------------------------------------------------------------------------------
// Material Setup:

/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
//@include mat.legacy-core();

@include mat.core();

@mixin app-theming($theme) {
  .drawer-list-item-active {
    //background-color: rgba(mat.get-theme-color($theme, primary), 0.15) !important;
    background-color: color-mix(in srgb, mat.get-theme-color($theme, primary) 15%, transparent);
    color: mat.get-theme-color($theme, primary) !important;
    .mat-mdc-list-item-icon {
      color: mat.get-theme-color($theme, primary) !important;
    }
  }

}



/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/
//@include mat.all-legacy-component-typographies();


//@include mat.all-component-typographies();


//@include mat.core-theme($light-theme);
/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
//@include mat.all-legacy-component-themes($light-theme);

@mixin setup-themes($light-theme, $dark-theme) {
  @include mat.all-component-typographies();
  @include mat.typography-hierarchy($light-theme, $back-compat: true);

  @include mat.all-component-themes($light-theme);

  @include mat.color-variants-backwards-compatibility($light-theme);

  @include app-theming($light-theme);
}

@mixin setup-colors($light-theme, $dark-theme) {
  @include mat.system-level-colors($light-theme);
  @media (prefers-color-scheme: dark) {
    @include mat.system-level-colors($dark-theme);
  }
}


@mixin modern-theme() {
  $light-theme: mat.define-theme((
    color: (
      theme-type: light,

      use-system-variables: true
    ),
    density: (
      scale: 0
    )
  ));

  $dark-theme: mat.define-theme((
    color: (
      theme-type: dark,

      use-system-variables: true
    ),
    density: (
      scale: 0
    )
  ));

  @include setup-themes($light-theme, $dark-theme);
}

@mixin modern-colors($palette, $palette-tertiary) {
  $light-theme: mat.define-theme((
    color: (
      theme-type: light,
      primary: $palette,
      tertiary: $palette-tertiary,
      use-system-variables: true
    )
  ));

  $dark-theme: mat.define-theme((
    color: (
      theme-type: dark,
      primary: $palette,
      tertiary: $palette-tertiary,
      use-system-variables: true
    )
  ));

  @include setup-colors($light-theme, $dark-theme);
}

.theming {
  @include modern-theme();
}

// .main-theme {
//   @include modern-colors(mat.$azure-palette, mat.$azure-palette)
// }

@import 'default-theme-colors';

// $themes: (
//   "red": mat.$red-palette,
//   "green": mat.$green-palette,
//   "blue": mat.$blue-palette,
//   "yellow": mat.$yellow-palette,
//   "cyan": mat.$cyan-palette,
//   "magenta": mat.$magenta-palette,
//   "orange": mat.$orange-palette,
//   "chartreuse": mat.$chartreuse-palette,
// //  "azure": matx.$azure-palette,
//   "violet": mat.$violet-palette,
//   "rose": mat.$rose-palette
// );


// body {
//   @each $name, $palette in $themes {
//     &.theme-#{$name} {
//       @include modern-colors($palette)
//     }
//   }
// }

html, body {
  height: 100%;
  overscroll-behavior: none;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

// --------------------------------------------------------------------------------
// Material Overrides:

.mdc-evolution-chip-set .mat-mdc-chip {
  .mdc-evolution-chip__cell--primary,
  .mdc-evolution-chip__action--primary,
  .mat-mdc-chip-action-label {
    overflow: hidden;
  }
}

.mdc-list-item {
  &.mdc-list-item--with-two-lines, &.mdc-list-item--with-three-lines {
    .mdc-list-item {
      &__start, &__end {
        align-self: center !important;
        margin-top: 0 !important;
      }
    }
  }

  &.mdc-list-item--with-leading-icon {
    &.mdc-list-item--with-two-lines, &.mdc-list-item--with-three-lines {
      &.mdc-list-item--with-trailing-meta .mdc-list-item__end::before {
        height: 0 !important;
        content: none !important;
      }
    }
  }

  &.mdc-list-item--with-trailing-meta .mdc-list-item__end {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


// https://github.com/angular/components/issues/28618

@mixin elevations() {
  @for $elevation from 0 to 24 {
    .mat-elevation-z#{$elevation} {
      @include mat.elevation($elevation);
    }
  }
}

@include elevations();

.cdk-overlay-container {
  z-index: 10000 !important;
}

mat-icon.mat-mdc-card-avatar {
  width: 40px;
  height: 40px;
  font-size: 40px;
}

// https://github.com/angular/components/issues/30487
// https://github.com/angular/components/pull/30490
.mdc-switch__icons {
  // Works around a rendering issue in Safari 18.3 (see #30487).
  transform: translateZ(0);
}

.theming {
  // restores old behavior that was set on each dialog container element
  --mat-dialog-container-max-width: 80vw;

  // set dialog container to same as bottom sheet container
  --mdc-dialog-container-color: var(--sys-surface-container-low);
  //--mat-bottom-sheet-container-background-color: var(--sys-surface-container-low);
}

// --------------------------------------------------------------------------------

.main-content {
  margin: auto;
  padding: 24px;
  @media (max-width: 599px) {
    padding: 16px;
  }
  //width: 100%;
  max-width: 1920px;
}

.sidenav-list {
  .mat-mdc-list-item-icon {
    margin-right: 16px;
  }
}


@import 'default-tag-namespace-colors';

.tag-color {
  // background-color: var(--sys-primary);
  // color: var(--sys-on-primary);

  &.mat-mdc-chip {
    --mdc-chip-elevated-container-color: var(--sys-primary-container);
    --mdc-chip-label-text-color: var(--sys-on-primary-container);
    --mdc-chip-with-trailing-icon-trailing-icon-color: var(--sys-on-primary-container);
  }

  &.mat-mdc-menu-item {
    --mat-menu-item-label-text-color: var(--sys-primary);
    --mdc-list-list-item-label-text-color: var(--sys-primary);
  }

  &.mat-mdc-option {
    --mdc-list-list-item-label-text-color: var(--sys-primary);
    --mdc-list-list-item-hover-label-text-color: var(--sys-primary);
  }
}

.mat-mdc-chip.tag-chip {
  --mdc-chip-outline-width: 0;
}


@import 'image-list';

.toolbar-count {
  padding-left: 4px;
  padding-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}


// .file-info-panel .mat-bottom-sheet-container- {
//   &medium, &large, &xlarge {
//     width: 960px;
//     max-width: 960px;
//   }
// }

.file-info-panel .mat-bottom-sheet-container {
  width: 960px;
  max-width: 960px;
}


.virtual-scroll-viewport-full-width {
  .cdk-virtual-scroll-content-wrapper {
    width: 100%;
  }
}

.form-field-spacing {
  // TODO: Fix this
  //@extend .mat-mdc-text-field-wrapper;
  padding-bottom: var(--mat-form-field-subscript-text-line-height);
}

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

.tag-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-chip-list {
  .tag-chip {
    // restore old text wrapping behavior
    padding-block: calc((var(--mdc-chip-container-height) - max(var(--mdc-chip-with-avatar-avatar-size), var(--mdc-chip-label-text-line-height))) / 2);
    height: 100%;
  }

  .tag-chip-text {
    white-space: wrap;
    overflow-wrap: anywhere;
  }
}



.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.fxFlex {
  flex: 1 1 0%;
}

.button-row {
  flex-flow: row wrap;
  display: flex;
  place-content: stretch flex-end;
  align-items: stretch;
  gap: 8px;
}

.pages-tab-group {
  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
  .mat-tab-label {
    max-width: 160px;
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
    .mat-tab-label-content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .pages-tab-label-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}


// --------------------------------------------------------------------------------
// JSON Viewer Themes:

:root {
  --devtools-color-text-primary: rgb(32 33 36);
  --devtools-color-text-secondary: rgb(95 99 104);
  --devtools-color-text-disabled: rgb(128 134 139);
  --devtools-color-syntax-1: rgb(200 0 0);
  --devtools-color-syntax-2: rgb(136 18 128);
  --devtools-color-syntax-3: rgb(26 26 166);
}

@media (prefers-color-scheme: dark) {
  :root {
    --devtools-color-text-primary: rgb(232 234 237);
    --devtools-color-text-secondary: rgb(154 160 166);
    --devtools-color-text-disabled: rgb(128 134 139);
    --devtools-color-syntax-1: rgb(53 212 199);
    --devtools-color-syntax-2: rgb(93 176 215);
    --devtools-color-syntax-3: rgb(153 128 255);
  }
}

:root {
  --ngx-json-string : var(--devtools-color-syntax-1);
  --ngx-json-number : var(--devtools-color-syntax-3);
  --ngx-json-boolean : var(--devtools-color-syntax-3);
  --ngx-json-date : var(--devtools-color-text-primary);
  --ngx-json-array : var(--devtools-color-text-primary);
  --ngx-json-object : var(--devtools-color-text-primary);
  --ngx-json-function : var(--devtools-color-text-primary);
  --ngx-json-null : var(--devtools-color-text-disabled);
  --ngx-json-null-bg : rgb(0, 0, 0, 0);
  --ngx-json-undefined : var(--color-text-disabled);
  //--ngx-json-toggler : color of toggler
  --ngx-json-key : var(--devtools-color-syntax-2);
  //--ngx-json-separator : color of separators
  --ngx-json-value : var(--devtools-color-text-primary);
  --ngx-json-undefined-key : var(--devtools-color-text-primary);
  //--ngx-json-font-family : font-family
  //--ngx-json-font-family : font-size
}

