@use '~@angular/material' as mat;
// Include material themeing functions.
@import "~@angular/material/theming";

$custom-typography: mat.define-typography-config(
  /*$body-1: mat.define-typography-level(12px, 16px, 500),
  $body-2: mat.define-typography-level(12px, 16px, 500),
  $caption: mat.define-typography-level(10px, 14px, 500)*/
);

// Include non-theme styles for core.
@include mat.core($custom-typography);

// Import the custom themes.
@import "./assets/styles/themes/dark.scss";
@import "./assets/styles/themes/light.scss";
/** import any other custom themes here. */

@import "./assets/styles/themes/file-icon.scss";

// import codemirror custom mat theme
@import "./assets/styles/codemirror-custom-mat.scss";

// snackbar customized
@import "./assets/styles/snackbar.scss";

@import './assets/styles/responsive-base.scss';

// Import custom theming mixins for any custom components.
@import "./app/app-mat-component.scss";
@import "./app/components/welcome/welcome.component-mat.scss";
@import "./app/components/resource-page/chat-layout/chat-message/markdown-editor/emoji-picker/emoji-picker.component-mat.scss";
@import "./app/components/resource-page/chat-layout/chat-message/markdown-editor/emoji-picker/emoji-picker.component-mat.scss";
@import "./app/components/resource-page/chat-layout/chat-message/markdown-editor/emoji-shortcode-picker/emoji-shortcode-picker-mat.component.scss";
@import "./app/components/header/header-mat.component.scss";
@import "./app/components/header/search-input/search-input-mat.component.scss";
@import "./app/components/resources-sidebar/resources-sidebar-mat.component.scss";
@import "./app/components/resources-sidebar/resource-group/resource-group-mat.component.scss";
@import "./app/components/resource-page/resource-page-mat.component.scss";
@import "./app/components/resources-sidebar/resource-node/resource-node-mat.component.scss";
@import "./app/components/resource-page/chat-layout/chat-layout-mat.component.scss";
@import "./app/components/resource-page/chat-layout/chat-message/chat-message-mat.component.scss";
@import "./app/components/resource-page/drive-window/drive-layout/drive-layout-mat.component.scss";
@import "./app/components/search-view/search-view-mat.component.scss";
@import "./app/components/search-view/search-view-result/search-view-result-mat.component.scss";
@import "./app/components/resources-sidebar/search-sidebar-view/search-sidebar-view-mat.component.scss";
@import "./app/components/resource-page/chat-layout/chat-message/markdown-view/markdown-view-mat.component.scss";
@import "./app/components/resource-page/chat-layout/chat-message/markdown-view/markdown-file-preview/markdown-file-preview-mat.component.scss";
@import "./app/components/resource-page/drive-window/drive-layout/file-block-view/file-block-view-mat.component.scss";
@import "./app/components/resource-page/drive-window/drive-layout/file-list-view/file-list-view-mat.component.scss";
@import "./app/components/login/login-mat.components.scss";
@import "./app/components/register/register-mat.component.scss";
@import "./app/components/register-confirm/register-confirm-mat.component.scss";
@import "./app/components/account-recovery/account-recovery-mat.component.scss";
@import "./app/components/account-recovery-confirm/account-recovery-confirm-mat.component.scss";
@import "./app/components/resources-sidebar/sidebar-element-drag-preview/sidebar-element-drag-preview-mat.scss";
@import "./app/components/download-manager/download-manager-mat.component.scss";
@import "./app/components/download-manager/download-manager-file/download-manager-file-mat.component.scss";
@import "./app/components/action-queue/action-queue-element/action-queue-element-mat.component.scss";
@import "./app/components/resource-page/room-details/room-details-mat.component.scss";
@import "./app/shared/dialogs/invite-user-dialog/invite-user-dialog-mat.components.scss";
@import "./app/components/nano-manager/nano-manager-mat.component.scss";
@import "./app/components/nano-manager/create-drive-dialog/create-drive-dialog-mat.component.scss";
@import "./app/components/settings/settings-mat.component.scss";
@import "./app/components/advanced-settings/advanced-settings-mat.component.scss";
@import "./app/components/account-settings/account-settings-mat.component.scss";
@import "./app/components/nano-manager/attach-room-dialog/attach-room-dialog-mat.component.scss";
@import "./app/components/resource-page/chat-layout/chat-message/markdown-editor/markdown-editor.component-mat.scss";
@import "./app/shared/guide/guide-directive-mat.scss";
@import "./app/components//blob-viewer/blob-viewer.component-mat.scss";
@import "./app/components/nano-license-buy/nano-license-buy-mat.component.scss";
@import "./app/shared/dialogs/contact-dialog/contact-dialog-mat.component.scss";
@import "./app/components/nano-license/recurring-order-detail-dialog/recurring-order-detail-dialog-mat.component.scss";
@import "./app/components/nano-license/nano-license-mat.component.scss";
@import "./app/components/aggregate-stats/aggregate-stats-mat.component.scss";
@import "./app/shared/dialogs/image-cropper-dialog/image-cropper-dialog-mat.component.scss";

/** import any other custom themeing mixins here. */

// Use a mixin to apply the theme to any custom components. This way if you support multiple themes you only need to call this mixin once per theme, instead of having to add each components mixin to every theme individually.
@mixin custom-component-theming($theme) {
  @include codemirror-mat($theme);

  @include app-mat($theme);
  @include welcome-mat($theme);
  @include emoji-picker-mat($theme);
  @include emoji-shortcode-picker-mat($theme);
  @include header-mat($theme);
  @include search-input-mat($theme);
  @include resources-sidebar-mat($theme);
  @include resources-group-mat($theme);
  @include resources-page-mat($theme);
  @include resources-node-mat($theme);
  @include chat-layout-mat($theme);
  @include chat-message-mat($theme);
  @include drive-layout-mat($theme);
  @include search-view-mat($theme);
  @include search-view-result-mat($theme);
  @include search-sidebar-view-mat($theme);
  @include markdown-view-mat($theme);
  @include markdown-file-preview-mat($theme);
  @include file-block-view-mat($theme);
  @include file-list-view-mat($theme);
  @include login-mat($theme);
  @include register-mat($theme);
  @include register-confirm-mat($theme);
  @include account-recovery-mat($theme);
  @include account-recovery-confirm-mat($theme);
  @include siebar-element-drag-preview-mat($theme);
  @include download-manager-mat($theme);
  @include download-manager-file-mat($theme);
  @include action-queue-element-mat($theme);
  @include room-details-mat($theme);
  @include invite-user-dialog-mat($theme);
  @include nano-manager-mat($theme);
  @include create-drive-dialog-mat($theme);
  @include settings-mat($theme);
  @include advanced-settings-mat($theme);
  @include account-settings-mat($theme);
  @include attach-room-dialog-mat($theme);
  @include markdown-editor-mat($theme);
  @include guide-directive-mat($theme);
  @include blob-viewer-mat($theme);
  @include nano-license-buy-mat($theme);
  @include contact-dialog-mat($theme);
  @include recurring-order-detail-dialog-mat($theme);
  @include nano-license-mat($theme);
  @include aggregate-stats-mat($theme);
  @include app-image-cropper-dialog-mat($theme);
  @include snackbar-mat($theme);
  /** add any other theming mixins from custom components here. */
}

@mixin global-theming($theme) {
  $background: map-get($theme, background);
  $foreground-palette: map-get($theme, foreground);
  $text-color: mat.get-color-from-palette($foreground-palette, text);

  // global styles, or override the material style
  mat-sidenav-content,
  .mat-toolbar.mat-primary,
  #style-menu,
  #style-menu mat-icon:hover {
    background-color: mat.get-color-from-palette($background, background);
  }

  .primary {
    color: mat.get-color-from-palette($primary) !important;
  }
  .accent {
    color: mat.get-color-from-palette($accent) !important;
  }
  .warn {
    color: mat.get-color-from-palette($warn) !important;
  }

  .nano-input {
    background-color: map-get($theme, search-bar);
    border: 1px solid
      rgba(mat.get-color-from-palette(map-get($theme, foreground), text), 0.38);
    color: mat.get-color-from-palette(map-get($theme, foreground), text);
    width: 100%;
    height: 32px;
    max-width: 400px;
    border-radius: 4px;
    padding-left: 4px;
    box-sizing: border-box;

    ::placeholder {
      color: map-get($theme, inactive-text);
    }

    
  }

  .nano-input[disabled]{
    color: map-get($theme, inactive-text);
    background-color: map-get($theme, disabled-input-bg);
  }

  a{
    color: mat.get-color-from-palette($primary);
  }

  .mat-stepper-vertical, .mat-select-panel, .mat-form-field-appearance-fill, .mat-table{
    background-color: map-get($theme, resource-content);
  }
  .mat-card{
    background-color: map-get($theme, selected-menu);
  }

  @include screen('desktop'){
    
    // scrollbar
    ::-webkit-scrollbar {
      width: 6px;
    }
    
    ::-webkit-scrollbar-track {
      background: map-get($theme, scrollbar-track);
    }
    
    ::-webkit-scrollbar-thumb {
      background: map-get($theme, scrollbar-thumb);
      cursor: pointer;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: map-get($theme, scrollbar-thumb-hover);
      cursor: pointer;
    }

    *{
      scrollbar-color: map-get($theme, scrollbar-thumb) map-get($theme, scrollbar-track);
      scrollbar-width: thin;
    }
  }

}

.theme-light {
  // Call the main material theme mixin to create all the default theming styles.
  @include mat.all-component-themes($theme-light);
  // Call the custom component mixin to create all the custom component theming styles
  @include custom-component-theming($theme-light);

  @include global-theming($theme-light);

  @include file-icon($theme-light);
}

.theme-dark {
  // Call the main material theme mixin to create all the default theming styles.
  @include mat.all-component-themes($theme-dark);
  // Call the custom component mixin to create all the custom component theming styles
  @include custom-component-theming($theme-dark);

  @include global-theming($theme-dark);

  @include file-icon($theme-dark);
}

body.theme-dark {
  //background-color: #303030;
  background-color: map-get($theme-dark, resource-content);
  .mat-dialog-container, .mat-menu-panel {
    background-color: map-get($theme-dark, resource-content);
  }

  background-color: map-get($theme-dark, default-content-background) !important;
}
body.theme-light {
  //background-color: #fafafa;
  background-color: map-get($theme-light, resource-content);

  .mat-dialog-container, .mat-menu-panel {
    background-color: map-get($theme-light, resource-content);
  }

  background-color: map-get($theme-light, default-content-background) !important;
}

/* You can add global styles to this file, and also import other style files */
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

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

.sub-page {
  margin: 20px;

  >small:first-of-type {
    margin-bottom: 40px;
    display: block;
  }
}

.data-error{
  font-style: italic;
  color: mat.get-color-from-palette($warn);
}

mat-icon{
  cursor: pointer;
}

.mat-form-field-appearance-fill{
  background-color: unset !important;
}

code.hljs{
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

.hide{
  display: none;
}

.mat-dialog-container {
  margin: 16px;
  max-height:calc(100% - 32px) !important;
  padding: 0 !important;
  > *{
    padding: 24px;
    display: block;
  }
}

.cdk-overlay-pane{
  margin-top: 0 !important;
}

.mat-dialog-actions{
  min-height: auto !important;
  margin-bottom:0 !important;
  padding: 12px;
}

.cropper-crop-box, .cropper-view-box {
  border-radius: 50%;
}

.cropper-view-box {
  box-shadow: 0 0 0 1px #39f;
  outline: 0;
}

.form-row{
  margin-bottom: 10px;
  font-size: 12px;
  mat-form-field{
    width: 100%;
  }

  .mat-form-field-subscript-wrapper{
    font-size: 85%;
    margin-top: 0.8666666667em;
  }
}