/*
 * Overrides for the Trix stylesheet (linked separately as `trix`). These rules
 * adjust the toolbar and trix-editor content so Action Text attachments render
 * correctly. The base Trix styles are provided by the action_text-trix gem.
 */

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery>action-text-attachment,
.trix-content .attachment-gallery>.attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2>action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2>.attachment,
.trix-content .attachment-gallery.attachment-gallery--4>action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4>.attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/* app/assets/stylesheets/color_picker.css */

/* Style the color swatch wrapper (Chrome/Safari/Edge) */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  /* border-radius: 50% !important; */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Style the color swatch itself (Chrome/Safari/Edge) */
input[type="color"]::-webkit-color-swatch {
  border: none !important;
  /* border-radius: 50% !important; */
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Style for Firefox */
input[type="color"]::-moz-color-swatch {
  border: none !important;
  /* border-radius: 50% !important; */
  padding: 10 !important;
  margin: 0 !important;
}

/* Basic input styling */
input[type="color"].trix-color-picker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 24px !important;
  height: 24px !important;
  padding: 10 !important;
  margin: 0 !important;
  border: 1px solid #ddd !important;
  /* border-radius: 50% !important; */
  background: none;
  cursor: pointer;
  visibility: visible !important;
  /* Make it visible */
}

/* Style the color button */
#fgcolor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10 !important;
}

/* Position the color picker over the button icon */
#foregroundColorPicker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}

/* Show color picker icon when color isn't selected */
#fgcolor-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  pointer-events: none;
  /* Allow clicks to pass through to the input */
}