.tzq-form-group {
margin-bottom: var(--tzq-spacing-lg);
}
.tzq-form-group--compact {
margin-bottom: var(--tzq-spacing-md);
}
.tzq-form-group--spacious {
margin-bottom: var(--tzq-spacing-lg);
}
.tzq-form-group__label {
display: block;
font-weight: var(--tzq-font-semibold);
color: var(--tzq-text-primary);
margin-bottom: var(--tzq-spacing-sm);
font-size: var(--tzq-text-sm);
}
.tzq-form-group__label--flex {
display: flex;
align-items: center;
gap: var(--tzq-spacing-xs);
font-weight: 600;
font-size: var(--tzq-text-sm);
margin-bottom: var(--tzq-spacing-xs);
}
.tzq-form-group__label--required::after {
content: "*";
color: var(--tzq-error);
margin-left: var(--tzq-spacing-1);
}
.tzq-form-group__input {
width: 100%;
padding: var(--tzq-input-padding);
background: var(--tzq-bg-primary);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
font-size: var(--tzq-text-base);
font-family: var(--tzq-font-primary);
color: var(--tzq-text-primary);
transition: var(--tzq-transition-all);
outline: none;
}
.tzq-form-group__input:focus {
border-color: var(--tzq-primary);
box-shadow: var(--tzq-input-focus-ring);
background: var(--tzq-bg-primary);
}
.tzq-form-group__input::placeholder {
color: var(--tzq-text-tertiary);
opacity: 0.7;
}
.tzq-form-group__input--error {
border-color: var(--tzq-error);
}
.tzq-form-group__input--success {
border-color: var(--tzq-success);
}
.tzq-form-group__input:disabled {
background: var(--tzq-bg-secondary);
cursor: not-allowed;
opacity: 0.6;
}
.tzq-form-group__textarea {
width: 100%;
padding: var(--tzq-input-padding);
background: var(--tzq-bg-primary);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
font-size: var(--tzq-text-base);
font-family: var(--tzq-font-primary);
color: var(--tzq-text-primary);
transition: var(--tzq-transition-all);
outline: none;
min-height: 120px;
resize: vertical;
}
.tzq-form-group__textarea:focus {
border-color: var(--tzq-primary);
box-shadow: var(--tzq-input-focus-ring);
background: var(--tzq-bg-primary);
}
.tzq-form-group__textarea::placeholder {
color: var(--tzq-text-tertiary);
opacity: 0.7;
}
.tzq-form-group__textarea--error {
border-color: var(--tzq-error);
}
.tzq-form-group__textarea--success {
border-color: var(--tzq-success);
}
.tzq-form-group__select {
width: 100%;
padding: var(--tzq-input-padding);
background: var(--tzq-bg-primary);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
font-size: var(--tzq-text-base);
font-family: var(--tzq-font-primary);
color: var(--tzq-text-primary);
transition: var(--tzq-transition-all);
outline: none;
}
.tzq-form-group__select:focus {
border-color: var(--tzq-primary);
box-shadow: var(--tzq-input-focus-ring);
background: var(--tzq-bg-primary);
}
.tzq-form-group__select--error {
border-color: var(--tzq-error);
}
.tzq-form-group__select--success {
border-color: var(--tzq-success);
}
.tzq-form--inline {
display: flex;
align-items: flex-end;
gap: var(--tzq-spacing-md);
flex-wrap: wrap;
}
.tzq-form--inline .tzq-form-group {
flex: 1;
min-width: 200px;
margin-bottom: 0;
}
.tzq-form-group__help {
display: block;
font-size: var(--tzq-text-sm);
color: var(--tzq-text-tertiary);
margin-top: var(--tzq-spacing-1);
}
.tzq-form-group__error {
display: block;
font-size: var(--tzq-text-sm);
color: var(--tzq-error);
margin-top: var(--tzq-spacing-1);
animation: shake 0.5s ease;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
transform: translateX(10px);
}
}
.tzq-form-check {
display: flex;
align-items: center;
gap: var(--tzq-spacing-2);
margin-bottom: var(--tzq-spacing-3);
}
.tzq-form-check__input {
width: 20px;
height: 20px;
cursor: pointer;
}
.tzq-form-check__label {
cursor: pointer;
user-select: none;
font-weight: var(--tzq-font-normal);
}