/* DEPRECATED: should be removed and turned into a basic container component */
@import 'global-styles/custom-properties/color';
@import 'global-styles/custom-properties/font';

.g-form {
  & .field {
    display: flex;
    flex-direction: column;
    max-width: 520px;
    margin-bottom: 30px;

    & label {
      font-size: 0.8rem;
      text-transform: uppercase;
      font-weight: var(--font-weight-bold);
      color: var(--DEPRECATED-gray-5);
      letter-spacing: 0.4px;
      margin-bottom: 5px;

      & .asterisk {
        color: #d34e4e;
      }
    }

    & input[type='text'] {
      padding: 12px 16px;
      font-size: 1rem;
      border: 1px solid var(--DEPRECATED-gray-7);

      &:focus {
        outline: 0;
        border-color: var(--brand);
      }
    }

    & input[type='submit'] {
      font-size: 1.1rem;
    }
  }
}