@import './Form.css';
@import './Button.css';
@import "./theme.css";

.react-aria-DateField {
    color: var(--text-color);
}

.react-aria-DateInput {
    display: flex;
    padding: 4px;
    border: 1px solid var(--list-background);
    border-radius: 4px;
    background: transparent;
    width: fit-content;
    min-width: 150px;
    font-size: 18px;
    white-space: nowrap;
    forced-color-adjust: none;
    padding: 5.5px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;

    &[data-focus-within] {
        outline: 2px solid var(--secondary-color);
        outline-offset: -1px;
    }
}

.react-aria-DateSegment {
    padding: 0 2px;
    font-variant-numeric: tabular-nums;
    text-align: end;
    color: var(--text-color);

    &[data-type=literal] {
        padding: 0;
    }

    &[data-placeholder] {
        color: var(--text-color-placeholder);
        font-style: italic;
    }

    &:focus {
        color: var(--highlight-foreground);
        background: var(--highlight-background);
        outline: none;
        border-radius: 4px;
        caret-color: transparent;
    }

    &[data-invalid] {
        color: var(--invalid-color);

        &:focus {
            background: var(--highlight-background-invalid);
            color: var(--highlight-foreground);
        }
    }
}

.react-aria-DateField {
    .react-aria-FieldError {
        font-size: 12px;
        color: var(--invalid-color);
    }

    [slot=description] {
        font-size: 12px;
    }
}