form.css

@import './colors.css';
@import './media.css';

input, button, textarea, .btn {
  border: solid 2px var(--light-gray);
  border-radius: 5px;
  font-size: 0.8em;
  line-height: 125%;
  padding: .75rem 1rem;
}

input, textarea {
  font-weight: 400;
}

button, .btn {
  font-weight: 500;
  display: inline-block;
  border-color: var(--orange);
  background-color: transparent;
  color: var(--orange);
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 2px 2px hsla(0, 0%, 0%, 0.2);
  transition: box-shadow .2s;

  &.primary, &.tito-submit {
    border: none;
    background-color: var(--orange);
    color: white;
  }

  &:hover {
    text-decoration: none;
    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.25);
  }

  &[disabled] {
    border-color: var(--gray);
    color: var(--gray);
  }

  &.xs-full-width {
    width: 100%;
    padding: .75rem 1rem;
  }
}