58 lines
995 B
SCSS
58 lines
995 B
SCSS
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.label {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.006em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
padding: 0.5625rem 0.75rem;
|
|
background-color: var(--bg-default);
|
|
border: 1px solid var(--border-default);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.875rem;
|
|
color: var(--text-primary);
|
|
transition: all var(--duration-normal) var(--ease-out);
|
|
|
|
&::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
&:hover:not(:disabled) {
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
background-color: var(--bg-surface);
|
|
}
|
|
}
|
|
|
|
.error {
|
|
border-color: var(--color-danger);
|
|
|
|
&:focus {
|
|
border-color: var(--color-danger);
|
|
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
|
|
}
|
|
}
|
|
|
|
.undertitle {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
}
|