ihk24/gfi-ihk-2024/stories/components/newsletter-teaser/newsletter-teaser.scss

@use '../../_global/styles/mixins' as *;

*:has(> .newsletter-teaser) {
  container-type: inline-size;
}

.newsletter-teaser {
  --color-text-accent: var(--color-text) !important;
  font-size: var(--font-size-small);
  padding: var(--content-box-padding);
  border-radius: var(--border-radius-xs);
  color: var(--color-text);
  @include gradient;

  @media(max-width: 767px) {
    padding: calc(var(--content-box-padding) * 2) var(--content-box-padding);
  }

  h2 {
    margin-top: var(--section-headline-margin);
    margin-bottom: 0.4em;
  }

  .input-wrapper {
    margin: 1.5em 0;
    display: flex;

    input {
      margin: 0 1em 0 0;
      min-width: 40%;
      width: auto;
      flex-grow: 1;
    }

    .btn {
      display: block;
      white-space: nowrap;
    }

    @media(max-width: 567px) {
      display: block;

      .btn {
        margin-top: 0.7em;
      }

      input {
        min-width: 100%;
      }
    }
  }

  ul {
    margin: 2em 0 -0.3em;
    padding: 0;
    list-style: none;
  }

  li {
    margin: 0.4em 0 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    line-height: 1.3;

    .form-element {
      width: 100%;
    }
  }

  input[type="checkbox"] {
    margin-right: 0.6em;
    margin-left: 0;
    border-color: var(--swatches-neutrals-white);

    + label {
      font-size: var(--font-size-small);
      margin-bottom: 0.3em;
    }
  }
}