@layer utilities {
  @media (prefers-color-scheme: dark) {
    /**
     * Color overrides
     **/
    .bg-primary-900 {
      /* TODO We can't really do this. We need to just append a transparency class to these elements. */
      background-color: rgba(0, 0, 0, 0.15);
    }

    .bg-dark-gradient {
      &:before {
        background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
      }
      background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
    }

    /**
     * General
     **/
    .button {
      @apply ring-offset-darkPrimary-700;
    }

    .table {
      th {
        @apply text-darkPrimary-400;
      }

      tbody {
        @apply border-gray-500;

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

        td {
          @apply text-gray-400;

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

    /**
     * Form components
     **/
    .button-secondary {
      @apply text-darkAccent-200;
    }

    .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-darkPrimary-800 border border-solid border-darkPrimary-900;

      .pcr-interaction .pcr-result {
        @apply text-darkPrimary-300 border border-solid border-darkPrimary-900 bg-darkPrimary-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-darkPrimary-800 border-darkPrimary-900;

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

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

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

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

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

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

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

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

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

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

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

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

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

      .select2-selection--multiple, .select2-selection--single {
        @apply bg-darkPrimary-800 focus:ring-primary-500 border-darkPrimary-900 !important;
        @apply text-darkPrimary-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-darkPrimary-300;
      }
    }

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

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

    trix-toolbar {
      .trix-button-group, .trix-button {
        @apply border-darkPrimary-900 !important;
      }
    }

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

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

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

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

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

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