@import 'moda-themes/themes';

.email-signup {
  .gender-selection {
    min-width: 200px;

    input {
      margin-right: 5px;

      &[name='men'] {
        margin-left: 30px;
      }
    }
  }

  form {
    margin-top: 5px;
  }

  .newsletter-email-input {
    width: 100%;
    height: 33px;
    padding-left: 5px;
    border: 1px solid color('white');

    @include range-mobile {
      width: calc(100% - 10px);
    }

    &::placeholder {
      color: color('nokia');
    }

    &:focus {
      outline: none;
      border-color: color('transition-gold-to-black');
    }

    &.error {
      color: color('code-red');
      border-color: color('code-red');
    }
  }

  .submit-button {
    border: none;
    font-size: 24px;
    background: none;
    position: relative;
    float: right;
    top: -36px;

    &:hover {
      cursor: pointer;
    }

    &:focus {
      outline: none;
    }
  }

  &__opt-out {
    margin-top: 5px;

    @include range-mobile {
      text-align: center;
      line-height: 16px;
    }

    a {
      text-decoration: none;
    }
  }

  &__error {
    padding: 0 5px;
    font-size: 11px;
    margin-top: 8px;
    width: fit-content;
    background-color: color('code-red');

    .mo-display-icon-exclamation-circle {
      margin-right: 4px;
    }
  }
}