/* Combobox */

.watts-combobox {
    display: grid;
    grid-template: 1fr / 1fr;
}

.watts-combobox:has(.watts-combobox__label) {
    margin-top: var(--watts-spacing-050, 8px);
}

.watts-combobox__interactive-wrapper {
    grid-area: 1 / 1;
}

.watts-combobox__label {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start;
    margin: -8px 0 0 12px;
    background: var(--watts-bg-default);
    padding: 0 var(--watts-spacing-025, 4px);
    z-index: 1;
    pointer-events: none;
    line-height: var(--watts-line-height-l, 133%);
}

/* Date Picker */

.watts-date-picker {
    display: grid;
    grid-template: 1fr / 1fr;
}

.watts-date-picker:has(.watts-text-field__label) {
    margin-top: var(--watts-spacing-050, 8px);
}

.watts-date-picker .watts-text-field__label {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start;
    margin: -8px 0 0 12px;
    background: var(--watts-bg-default);
    padding: 0 var(--watts-spacing-025, 4px);
    z-index: 1;
    pointer-events: none;
    line-height: var(--watts-line-height-l, 133%);
}

/* Text Field */

.watts-text-field-container {
    display: grid;
    grid-template: 1fr / 1fr;
}

.watts-text-field-container:has(.watts-text-field_label) {
    margin-top: var(--watts-spacing-050, 8px);
}

.watts-text-field-container .watts-text-field {
    grid-area: 1 / 1;
}

.watts-text-field_label {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start;
    margin: -8px 0 0 12px;
    background: var(--watts-bg-default);
    padding: 0 var(--watts-spacing-025, 4px);
    z-index: 1;
    pointer-events: none;
    line-height: var(--watts-line-height-l, 133%);
}