@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/colors";

$_unpublished-color: #ffc0cb;

[data-unpublished="node"] {
  background-color: $_unpublished-color;
}

[data-unpublished="paragraph"] {
  position: relative;

  &::after {
    $_background-pattern-color: rgba($_unpublished-color, 0.125);

    background-image:
      repeating-linear-gradient(
        45deg,
        $_background-pattern-color 25%,
        transparent 25%,
        transparent 75%,
        $_background-pattern-color 75%,
        $_background-pattern-color
      ),
      repeating-linear-gradient(
        45deg,
        $_background-pattern-color 25%,
        transparent 25%,
        transparent 75%,
        $_background-pattern-color 75%,
        $_background-pattern-color
      );
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    content: '';
    inset: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
    position: absolute;
    z-index: 100;
  }

  &::before {
    background-color: $_unpublished-color;
    color: #000000;
    content: 'Unpublished';
    display: block;
    font-size: 0.75em;
    font-weight: var(--unpublished--font-weight);
    padding: 1em;
    pointer-events: none;
    margin-bottom: site-config.spacer(0);
  }
}
