@use '@angular/material' as mat;

$mat-dark: (
  50: #6e6e6e,
  100: #525254,
  200: #424346,
  300: #2e3238,
  400: #1a1d21,
  500: #FF6143,
  700: #FF6143,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  ),
);
$mat-dark-orange-palette: (
  50: #fdded9,
  100: #fcbdb2,
  200: #f89d8b,
  300: #fa7a61,
  500: #FF6143,
  700: #FF6143,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  ),
);
$mat-dark-red-palette: (
  50: #f6e0e0,
  100: #f1bcbc,
  200: #eea2a2,
  300: #e78d8d,
  500: #ef5350,
  700: #ef5350,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  ),
);

$dark-primary: mat.define-palette($mat-dark, 500);
$dark-accent: mat.define-palette($mat-dark-orange-palette, 500);
$dark-warn: mat.define-palette($mat-dark-red-palette, 500);
$dark-theme: mat.define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $dark-warn,
  )
));

body.app-theme-dark {
  color: #f1f1f1;
  background: mat.get-color-from-palette($mat-dark, 400);
}
.app-theme-dark {
  @include mat.all-component-themes($dark-theme);
  $dark-primary-color: #FF6143;
  $text-color: rgba(255, 255, 255, .87);

  .topbar-container, .show-applied-filters-btn mat-icon, .hide-applied-filters-btn mat-icon {
    background: #121212 !important;
  }
  .fl-notification-circle, .notification-circle, .mat-ink-bar {
    background-color: $dark-primary-color !important;
  }
  .fl-card-fixed,
  .fl-card-fixed-md,
  .fl-card-fixed-sm {
    @include mat.elevation(2);
  }
  mat-icon {
    color: grey;
  }
  a[disabled] .mat-icon, button[disabled] .mat-icon {
    color: #4d4f52 !important;
  }
  .mat-mdc-button-base {
    text-transform: uppercase;
  }
  .object-card-content {
    margin-left: 15px;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    color: $text-color;
  }
  .fl-tag {
    background-color: mat.get-color-from-palette($mat-dark, 200);
    color: white;
    padding: 2px 8px 2px 8px;
    border-radius: 2px;
    font-weight: normal;
  }

  .fl-slightly-gray {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .content-container, .sidenav-container, .powered-text, .sub-header, .no-objects-message,
  .task-log, .task-log-container, .referral-url-container {
     color: $text-color;
     background: mat.get-color-from-palette($mat-dark, 400) !important;
  }
  .fl-selected {
    border-color: $dark-primary-color !important;
    color: $dark-primary-color !important;
  }
  .mat-mdc-card-header-text, .mat-mdc-card-subtitle, .card-details-avatar, .mat-mdc-option-text,
  .gridster-item, .gridster-item-wrapper, .mat-mdc-card-title,
  .menu-link, .menu-item-container, select,
  .mat-icon, .fl-content, .fl-detail, .mat-mdc-form-field.mat-focused .mat-form-field-label, .ticket-message-timestamp {
    color: $text-color !important;
  }
  .mdc-switch--checked .mdc-switch__shadow {
    background-color: $dark-primary-color !important;
  }
  .mdc-switch--checked .mdc-switch__track {
    background-color: #f3846b !important;
  }
  .mdc-switch--checked .mdc-switch__icon {
    fill: #fff !important;
  }
  .mat-icon.mat-primary {
    color: $dark-primary-color !important;
  }
  .gridster-item, .gridster-item-wrapper,
  .mat-mdc-table, .mat-mdc-card, .fl-image-selected-checkmark, .fl-bordered-box, .boot-source-select-dialog,
  .boot-source-select-dialog-footer, .fl-flavor-selected-checkmark, .mat-mdc-autocomplete-panel, .mat-mdc-select-panel,
  .mat-expansion-panel, .fl-backdrop, .fl-table, .mat-mdc-menu-panel, .mdc-button--unelevated,
  .mat-mdc-card-header-text, .object-card-title, select {
    background: mat.get-color-from-palette($mat-dark, 300) !important;
  }
  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background: #353940 !important;
  }
  .mdc-text-field--disabled.mdc-text-field--filled {
    background: #2a2e34 !important;
  }
  .mat-mdc-dialog-container {
    --mdc-dialog-container-color: #2e3238 !important;
  }
  .fl-card-fixed .mat-mdc-card-header-text, .fl-card-fixed-md .mat-mdc-card-header-text,
  .fl-card-fixed-sm .mat-mdc-card-header-text, .fl-card-styling .mat-mdc-card-header-text,
  .card-details-avatar, .add-payment-container, .project-select-region-container {
    background: #22262d !important;
  }
  .product-link-row input {
    background: #22262d !important;
    color: $text-color;
  }
  input[type="file"]:disabled, input[type="file"]:disabled::file-selector-button {
    color: $text-color !important;
  }
  .ticket-message, .ticket-message .ticket-message-actions {
    background: mat.get-color-from-palette($mat-dark, 200) !important;
  }
  .ticket-message .chat-message-arrow {
    border-color: mat.get-color-from-palette($mat-dark, 200) !important;
  }
  .ticket-message code, .ticket-message pre[class*=language-] {
    background: #333842;
    color: #fff;
    text-shadow: 0 1px #000;
  }
  .foreign-ticket-message, .foreign-ticket-message .ticket-message-actions {
    background: #22262d !important;
  }
  .foreign-ticket-message .chat-message-arrow {
    border-color: #22262d !important;
  }
  .fl-bordered-box, .flavor-card, .fl-table tr, .product-row, .product-row-header, .task-row,
  .permissions-table tr {
    border-color: mat.get-color-from-palette($mat-dark, 100) !important;
  }
  .fl-red-color, .fl-important-text {
    caret-color: mat.get-color-from-palette($mat-dark-red-palette, 500) !important;
    color: mat.get-color-from-palette($mat-dark-red-palette, 500) !important;
  }
  .fl-green-color {
    color: #a5d6a7 !important;
  }
  .fl-red-bg {
    background-color: mat.get-color-from-palette($mat-dark-red-palette, 500) !important;
  }
  .fl-light-green-bg, .status-line-color-green {
    background-color: #a5d6a7 !important;
  }
  .status-line-color-yellow {
    background-color: #fff59d !important;
  }
  .status-line-color-orange {
    background-color: #ffcc80 !important;
  }
  .active-link, .active-link mat-icon, .notification-text a, .message-body a, .ticket-message a:not(.timestamp-link) {
    color: $dark-primary-color !important;
  }
  .sfa-option {
    color: $text-color !important;
    background-color: mat.get-color-from-palette($mat-dark, 400) !important;
  }
  .sfa-option:hover {
    background-color: mat.get-color-from-palette($mat-dark, 200) !important;
  }
  .fl-grid > tbody > tr > td, .fl-grid > thead > tr > th {
    color: $text-color;
  }
  .fl-grid > tbody > tr:hover {
    background-color: mat.get-color-from-palette($mat-dark, 200);
  }
  .add-item-button .mat-icon {
    color: mat.get-color-from-palette($mat-dark, 200) !important;
  }
  .fl-icon-yellow {
    color: #fff59d !important;
  }

  .client-avatar {
    color: #000;
    background-blend-mode: darken;
  }

  .estimated-price-text {
    color: $text-color;
  }

  .separate-list-table-row {
    border-top: 6px solid mat.get-color-from-palette($mat-dark, 400) !important;
  }

  input[type='number'][disabled] {
    appearance: textfield;
  }

  // tinymce custom styles start
  .tox .tox-edit-area__iframe {
    background:  mat.get-color-from-palette($mat-dark, 300) !important;
  }
  .tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary, .tox .tox-statusbar,
  .tox:not(.tox-tinymce-inline) .tox-editor-header, .tox .tox-toolbar-overlord {
    background: mat.get-color-from-palette($mat-dark, 400) !important;
    border-color: mat.get-color-from-palette($mat-dark, 200) !important;
    color: #fff !important;
  }
  .tox .tox-toolbar-overlord {
    border: none !important;
  }
  .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type), .tox-tinymce  {
    border-color: mat.get-color-from-palette($mat-dark, 200) !important;
  }
  .tox .tox-tbtn svg {
    fill: #fff !important;
  }
  .tox .tox-tbtn, .tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__wordcount {
    color: #fff !important;
  }
  .tox .tox-tbtn {
    background: mat.get-color-from-palette($mat-dark, 200) !important;
  }
  .tox .tox-tbtn:hover, .tox .tox-tbtn:focus, .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover {
    background: mat.get-color-from-palette($mat-dark, 300) !important;
  }
  // tinymce end
}
