.trix-dialog--color {
  max-width: 400px;
  display: none;

  .color_dialog__hide-unless-selection-contains-coloring {
    display: none;
  }

  &.color_dialog--selection-contains-coloring {
    .color_dialog__hide-unless-selection-contains-coloring {
      display: block;
    }
  }
}

/* Color pickers
 * -------------------------------------------------------------------------- */

.color-picker {
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 4px;
  display: grid;

  &:first-of-type {
    margin-bottom: 8px;
  }
}

.color-picker__field {
  position: relative;
  min-width: 1em;
  min-height: 1em;
  aspect-ratio: 1/1;
  cursor: pointer;
  text-indent: -999em;
}

.color-picker__input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;

  &:checked ~ .color-picker__swatch {
    &::before {
      content: '✓';
      font-weight: bold;
    }
  }
}

.color-picker__swatch {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: initial;
}

/* Variants
 * -------------------------------------------------------------------------- */

.color-picker--for-text {
  .color-picker__swatch::before {
    content: 'Ab';
    color: currentColor;
  }
}

.color-picker--for-text-foreground {
  .color-picker__swatch { background-color: var(--color-bg--message-content) !important; }
}

.color-picker--for-text-background {
  .color-picker__swatch { color: var(--color-txt--on-message-content) !important; }
}

/* Override new composer colorpicker for dark mode
 * -------------------------------------------------------------------------- */

.entry-composer--on-sheet {
  .color-picker--for-text-foreground {
    .color-picker__swatch { background-color: var(--color-bg--sheet) !important; }
  }

  .color-picker--for-text-background {
    .color-picker__swatch { color: var(--color-txt) !important; }
  }

  .color-picker__swatch {
    .color-picker--for-text-background & {
      color: var(--color-txt) !important;
    }

    /* Converts Trix colors in app/helpers/rich_text_helper#color_picker_dialog for display in dark mode */
    [data-color-scheme="dark"] & {
      /* Foreground colors */
      &[style*="#887626"] { color: #faf785 !important; }
      &[style*="#B95E06"] { color: #f8be6c !important; }
      &[style*="#CF0000"] { color: #fa7b7b !important; }
      &[style*="#D81CAA"] { color: #fab7e6 !important; }
      &[style*="#9013FE"] { color: #cebcfc !important; }
      &[style*="#0562B9"] { color: #97cafa !important; }
      &[style*="#118A0F"] { color: #b9f7b3 !important; }
      &[style*="#945216"] { color: #e0be9d !important; }
      &[style*="#666666"] { color: #b9b9b9 !important; }

      /* Background colors */
      &[style*="#FAF785"] { background-color: #9b7d44 !important; }
      &[style*="#FFF0DB"] { background-color: #993200 !important; }
      &[style*="#FFE5E5"] { background-color: #6a2217 !important; }
      &[style*="#FFE4F7"] { background-color: #7c3240 !important; }
      &[style*="#F2EDFF"] { background-color: #725ead !important; }
      &[style*="#E1EFFC"] { background-color: #204166 !important; }
      &[style*="#E4F8E2"] { background-color: #175331 !important; }
      &[style*="#EEE2D7"] { background-color: #473732 !important; }
      &[style*="#F2F2F2"] { background-color: #4d4d4d !important; }
    }
  }
}