// Name:            Newsletter
// Description:     Newsletter for users
//
// Component:       `c-newsletter`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-newsletter {
  --newsletter-height: 100vh;

  height: auto;  
  background-image: var(--newsletter-bg);
  background-repeat: repeat;
  background-position: top left;
  background-size: contain;

  .c-btn {
    background-color: var(--theme-color);
    color: #{$inverse-01};
    &:hover {
      background-color: var(--theme-color-dark);
    }
  }

  [data-homepage] & {
    text-align: center;
    color: #{$inverse-01};
    height: var(--newsletter-height);
    @include bp(md){
      height: auto;
    }
  }
}