@layer utilities {
  @media (prefers-color-scheme: dark) {
    /**
     * Color overrides
     **/
    .bg-blue-darker {
      background-color: rgba(0, 0, 0, 0.15);
    }

    .bg-dark-blue-gradient {
      &:before {
        background: linear-gradient(to bottom right, #633d7d, #2867ab 100%);
      }
      background: linear-gradient(to bottom right, #633d7d, #2867ab 100%);
    }

    /**
     * General
     **/
    .button {
      @apply ring-offset-sealBlue-400;
    }

    .table {
      th {
        @apply text-sealBlue-700;
      }

      tbody {
        @apply border-gray-500;

        tr {
          border-top: 1px solid theme('colors.sealBlue.600');
        }

        td {
          @apply text-gray-400;

          a,
          input[type="submit"] {
            @apply text-sealBlue-800;
          }
        }
      }
    }

    /**
     * Form components
     **/
    .button-secondary {
      @apply text-sealBlue-800;
    }

    .button-alternative {
      @apply bg-black-400 border-black-400 text-white;

      &:hover {
        @apply bg-black-300 border-black-200 text-white;
      }
    }

    /**
     * Custom components
     **/
    /* Color picker */
    .pcr-app {
      @apply bg-sealBlue-300 border border-solid border-sealBlue-100;

      .pcr-interaction .pcr-result {
        @apply text-sealBlue-900 border border-solid border-sealBlue-100 bg-sealBlue-300;

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

    /* Date range picker */
    .daterangepicker {
      @apply bg-sealBlue-300 border-sealBlue-100;

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

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

      .calendar-table {
        @apply bg-sealBlue-300 text-sealBlue-900;

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

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

      th {
        &.available:hover {
          @apply bg-sealBlue-500;
        }
      }

      td {
        &.off {
          @apply bg-sealBlue-300 text-white;
        }

        &.available:hover {
          @apply bg-sealBlue-500;
        }
      }

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

    /* Phone field */
    .iti__country-list {
      @apply bg-sealBlue-300 border border-solid border-sealBlue-100;
    }

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

      .select2-dropdown {
        @apply bg-sealBlue-400;
      }

      .select2-search__field {
        @apply bg-sealBlue-300 border-sealBlue-100 !important;
      }

      .select2-selection--multiple, .select2-selection--single {
        @apply bg-sealBlue-300 focus:ring-blue border-sealBlue-100 !important;
        @apply text-sealBlue-900;
      }

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

        .select2-selection__choice__remove {
          @apply text-white;

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

      .select2-results__option {
        @apply text-sealBlue-900;
      }
    }

    /* Trix Editor */
    trix-editor {
      @apply bg-sealBlue-300 border-sealBlue-100 !important;

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

    trix-toolbar {
      .trix-button-group, .trix-button {
        @apply border-sealBlue-100 !important;
      }
    }

    .tribute-container {
      ul {
        @apply bg-sealBlue-300 border-sealBlue-100 !important;
      }
    }

    .trix-dialogs {
      @apply bg-sealBlue-300 border-sealBlue-100 !important;
    }

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

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

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

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