@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/cta-secondary";
@use "@naomi-2025/ui-core/maps";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.subscribe {
  background-color: var(--bg-color);
  color: var(--color);
  padding-block: site-config.spacer(2);
  padding-inline: site-config.$column-gap;
  margin-inline: calc(#{ site-config.$column-gap } * -1);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: site-config.$column-gap;
  align-items: center;

  // Include order matters, the site-mode MUST ALWAYS come first.
  [data-site-mode="at-work"] & {
    @include maps.map-to-css-vars(maps.$site-mode-at-play, 'cta-secondary');
    @include maps.map-to-css-vars(maps.$color-scheme-sunset);
  }

  // Include order matters, the site-mode MUST ALWAYS come first.
  [data-site-mode="at-play"] & {
    @include maps.map-to-css-vars(maps.$site-mode-at-work, 'cta-secondary');
    @include maps.map-to-css-vars(maps.$color-scheme-newport);
  }

  &__text {
    @extend %text-style-label;
  }

  &__cta {
    a {
      @extend %cta-secondary;
    }
  }
}
