@import "variables";
@import "mixins";

.component-newsletter {
  padding: $space-md 0;
  .newsletter-wrap {
    h4 {
      display: none;
    }
  }
  .newsletter-col {
    display: flex;
    justify-content: space-between;
    h3 {
      margin-bottom: 2rem;
    }
  }
  &.newsletter-on-popup {
    .newsletter-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      &.active {
        display: flex;
      }
      .newsletter-wrap {
        position: relative;
        background-color: white;
        width: 77rem;
        max-width: 90%;
        max-height: 90%;
        padding: $space-md $space-md $space-sm $space-md;
        display: flex;
        flex-direction: column;
        justify-content: center;
        h4 {
          display: block;
        }
        .newsletter-form {
          display: grid;
          grid-template-columns: 20px 1fr;
          flex-wrap: wrap;
          grid-template-rows: auto;
          row-gap: 1.6rem;
          column-gap: 1rem;
          & > .overlay {
            background-color: $gray100;
          }
          .input-text {
            grid-column: 1 / span 2;
          }
          #gdpr {
            margin-top: 2px;
          }
          button.submit {
            grid-column: 1 / span 2;
          }
          p {
            grid-column: 1 / span 2;
          }
        }
        .close-btn {
          position: absolute;
          right: 0;
          top: 0;
          cursor: pointer;
          padding: $space-sm;
          transition: 0.3s;
          &:hover {
            background-color: $gray100;
            transition: 0.4s;
          }
        }
      }
    }
  }

  .newsletter-form {
    display: grid;
    grid-template-columns: 20px 1fr;
    flex-wrap: wrap;
    grid-template-rows: auto;
    row-gap: 1.6rem;
    column-gap: 1rem;
    & > .overlay {
      background-color: $gray100;
    }
    .input-text {
      grid-column: 1 / span 2;
    }
    #gdpr {
      margin-top: 2px;
    }
    button.submit {
      grid-column: 1 / span 2;
    }
    p {
      grid-column: 1 / span 2;
    }
  }
}
