@use  '../../assets/styles/index' as *;

.date-input {
    min-width: 0;
    padding: 0 5px;

    &:global(.uui-focus) {
        border: 1px solid var(--uui-control-border-checked);
    }

    &.size-24 {
        @include control-box-layout(22px, 0);
    }

    &.size-30 {
        @include control-box-layout(28px, 0);
    }

    &.size-36 {
        @include control-box-layout(34px, 0);
    }

    &.size-42 {
        @include control-box-layout(40px, 0);
    }

    &.size-48 {
        @include control-box-layout(46px, 0);
    }
}

.date-input-group {
    display: flex;
    min-width: 0;
    background-color: var(--uui-rdtp-bg);
    border: 1px solid var(--uui-control-border);

    .separator {
        display: flex;
        flex-shrink: 0;
        background: var(--uui-control-border);
        width: 1px;
    }

    &:hover {
        border-color: var(--uui-control_textinput-border-hover);

        .separator {
            background: var(--uui-control_textinput-border-hover);
        }

        &:global(.uui-disabled), &:global(.uui-readonly) {
            border-color: var(--uui-control-border);

            .separator {
                background: var(--uui-control-border);
            }
        }
    }

    &:global(.uui-focus) {
        border-color: var(--uui-control-border);

        .separator {
            background: var(--uui-control-border-checked);
        }

        .date-input {
            &:hover {
                outline: 1px solid var(--uui-control_textinput-border-hover);
            }

            &:global(.uui-focus) {
                outline: 1px solid var(--uui-control-border-checked);
            }
        }
    }

    &:global(.uui-readonly) {
        @include readonly-input();

        .date-input {
            &:global(.uui-focus) {
                box-shadow: none;
            }
        }
    }

    &:global(.uui-invalid) {
        border-color: var(--uui-negative-50);
    }
}
