.form {
  &.form-primary {
    label {
      color: var(--color-primary);
    }

    input[type="text"], input[type="email"], input[type="tel"], textarea {
      border-bottom: 2px solid var(--color-primary);
    }
  }

  &.form-black {
    label {
      color: var(--color-black);
    }

    input[type="text"], input[type="email"], input[type="tel"], textarea {
      border-bottom: 1px solid var(--color-black);
    }
  }

  label {
    display: block;
    font-weight: var(--font-weight-bold);
  }

  input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100%;
    background-color: inherit;
    border: none;
    border-bottom: 2px solid var(--color-white);
    font-size: var(--font-size-medium);
    color: var(--color-white);
    padding: 10px 0 3px 0;
    outline: none;

    &:focus {
      border-bottom: 2px solid var(--color-secondary);
    }
  }

  .form-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;

    @media (min-width: 768px) {
      flex-direction: row;
      gap: 30px;
    }
  }

  .form-control {
    width: 100%;
  }

  .form-check-box {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .form-actions {
    display: flex;
    gap: 30px;
    flex-direction: column;

    @media (min-width: 576px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
}