@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/border-radius";
@use "s360-scss-toolkit";

.curated-content {
  &[data-color-scheme] {
    --node-teaser--bg-color: var(--bg-color);
    --node-teaser--color: var(--color);

    --node-teaser--highlight-color-2: var(--highlight-color-2);
    --node-teaser--color-2: var(--color-2);
  }

  // **************************************************
  // Border Radii

  &.curated-content--border-radius-tl {
    --node-teaser--border-radius: #{ border-radius.top-left() };
  }

  &.curated-content--border-radius-tr {
    --node-teaser--border-radius: #{ border-radius.top-right() };
  }

  &.curated-content--border-radius-bl {
    --node-teaser--border-radius: #{ border-radius.bottom-left() };
  }

  &.curated-content--border-radius-br {
    --node-teaser--border-radius: #{ border-radius.bottom-right() };
  }

  &.curated-content--border-radius-tlbr {
    --node-teaser--border-radius: #{ border-radius.top-left--bottom-right() };
  }

  &.curated-content--border-radius-trbl {
    --node-teaser--border-radius: #{ border-radius.top-right--bottom-left() };
  }

  // **************************************************
  // Accent Colors

  &.curated-content--accent-1-bg-color {
    --node-teaser--accent-bg-color: var(--accent-bg-color-1);
  }

  &.curated-content--accent-2-bg-color {
    --node-teaser--accent-bg-color: var(--accent-bg-color-2);
  }

  &.curated-content--accent-3-bg-color {
    --node-teaser--accent-bg-color: var(--accent-bg-color-3);
  }

  &.curated-content--accent-4-bg-color {
    --node-teaser--accent-bg-color: var(--accent-bg-color-4);
  }
}
