@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 {
  &__content {
    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);
    }

    .subscribe__text {
      @extend %text-style-label;
    }

    .subscribe__cta {
      a {
        @extend %cta-secondary;
      }
    }
  }
}
