/**
 * "Text shadow" presets (paragraph blocks), applied on the front end through
 * the has-eo-text-shadow-{slug} class added by the text_shadow_frontend PHP
 * filter. Values must be kept in sync with TEXT_SHADOWS in
 * hooks/src/text-shadow.js (used for the editor preview). The "custom"
 * option is output as an inline style instead.
 */
$eo-text-shadows: (
  "none":     none,
  "natural":  2px 2px 3px rgba(0, 0, 0, 0.2),
  "deep":     3px 3px 6px rgba(0, 0, 0, 0.4),
  "sharp":    2px 2px 0 rgba(0, 0, 0, 0.2),
  "outlined": (2px 2px 0 #fff, 3px 3px 0 #000),
  "crisp":    2px 2px 0 #000,
  "glow":     0 0 8px rgba(0, 0, 0, 0.5),
);

@each $slug, $shadow in $eo-text-shadows {
  .has-eo-text-shadow-#{$slug} {
    text-shadow: $shadow;
  }
}

/**
 * Editor-only: "Aa" sample inside core's shadow indicator swatches, and the
 * "Custom" shadow editor.
 */
.eo-text-shadow-indicator {
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.eo-text-shadow-custom {
  &__preview {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background: #fff;
    color: #1e1e1e;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
  }
}

// Slightly wider than core's 230px so the "Custom" sliders get some room.
.eo-text-shadow-popover {
  width: 260px;
}