@layer utilities {
  @media (prefers-color-scheme: dark) {
    /**
     * Custom components
     **/
    /* Color picker */
    .pcr-app {
      @apply bg-slate-800 border border-solid border-slate-900;

      .pcr-interaction .pcr-result {
        @apply text-slate-300 border border-solid border-slate-900 bg-slate-800;

        &:focus {
          box-shadow: 0 0 0 1px theme('colors.primary.500'), 0 0 0 3px theme('colors.primary.500');
        }
      }
    }

    /* Date range picker */
    .daterangepicker {
      @apply bg-slate-800 border-slate-900;

      &::before {
        border-bottom-color: theme('colors.slate.900');
      }

      &::after {
        border-bottom-color: theme('colors.slate.800');
      }

      .calendar-table {
        @apply bg-slate-800 text-slate-300;

        /* navigation arrows */
        .available {
          span {
            @apply border-primary-500;
          }
        }
      }

      /* Clear and Apply buttons wrapper */
      .drp-buttons {
        border-top-color: theme('colors.slate.900');
        @apply text-slate-300;
      }

      th {
        &.available:hover {
          @apply bg-slate-600;
        }
      }

      td {
        &.off {
          @apply bg-slate-800 text-white;
        }

        &.available:hover {
          @apply bg-slate-600;
        }
      }

      .hourselect, .minuteselect, .ampmselect {
        @apply text-slate-300 border-slate-900 bg-slate-800 !important;
      }
    }

    /* Phone field */
    .iti__country-list {
      @apply bg-slate-800 border border-solid border-slate-900;
    }

    /* Select2 */
    .select2-container {
      .select2-selection__rendered {
        @apply text-slate-300 !important;
      }

      .select2-dropdown {
        @apply bg-slate-700;
      }

      .select2-search__field {
        @apply bg-slate-800 border-slate-900 !important;
      }

      .select2-selection--multiple, .select2-selection--single {
        @apply bg-slate-800 focus:ring-primary-500 border-slate-900 !important;
        @apply text-slate-300;
      }

      /* For the selected options in the multiple select2 component */
      .select2-selection__choice {
        @apply bg-primary-500 border-primary-500 !important;
        @apply text-white;

        .select2-selection__choice__remove {
          @apply text-white;

          &:hover {
            @apply text-white;
          }
        }
      }

      .select2-results__option {
        @apply text-slate-300;
      }
    }

    /* Trix Editor */
    trix-editor {
      @apply bg-slate-800 border-slate-900 !important;

      &:focus, &:active {
        @apply border-primary-500 !important;
      }
    }

    trix-toolbar {
      @apply opacity-50 !important;

      &.visible {
        @apply opacity-100 !important;
      }

      .trix-button-group, .trix-button {
        @apply border-slate-400 !important;
      }

      .trix-button:disabled::before {
        @apply opacity-25;
      }

      .trix-dialog {
        @apply bg-slate-800 border-slate-900 shadow-lg shadow-slate-900 !important;

        .trix-button--dialog {
          @apply text-white;
        }

        .trix-input--dialog {
          @apply bg-slate-800 dark:text-slate-300 focus:ring-primary-500 focus:border-primary-500;
        }
      }
    }

    .tribute-container {
      ul {
        @apply bg-slate-800 border-slate-900 !important;
      }
    }

    .trix-dialogs {
      @apply bg-slate-800 border-slate-900 !important;
    }

    .trix-content a[href^="bullettrain://"] {
      @apply text-white bg-slate-500;
    }

    /* CKEditor */
    .ck {
      --ck-color-base-background: theme('colors.slate.800');
      --ck-color-base-border: theme('colors.slate.900');
      --ck-color-toolbar-background: theme('colors.slate.800');
      --ck-color-toolbar-border: theme('colors.slate.900');
      --ck-color-text: theme('colors.slate.300');

      .ck-editor__editable:not(.ck-editor__nested-editable) {
        @apply shadow-none;

        &.ck-focused {
          @apply shadow-none;
        }
      }
    }
  }
}
