date-picker.bootstrap.scss

@use 'styles/utilities' as *;
@use '../light/themes' as *;

$theme: $bootstrap;

:host {
    --calendar-border-color: #{$bootstrap-calendar-border-color};

    igc-dialog {
        igc-calendar {
            border: none;
        }
    }

    [part~='label'] {
        @include type-style('body-1');

        margin-bottom: pad-block(rem(4px));

        &:empty {
            display: none;
        }
    }

    ::part(helper-text) {
        @include type-style('body-2');

        grid-auto-rows: minmax(rem(20px), auto);
    }
}

:host([readonly]) {
    igc-date-time-input::part(container),
    igc-date-time-input::part(prefix),
    igc-date-time-input::part(suffix) {
        background: var-get($theme, 'border-disabled-background');
    }
}

:host(:not([disabled],[readonly]):state(ig-invalid)) {
    igc-date-time-input::part(input) {
        border-color: var-get($theme, 'error-secondary-color');
    }

    igc-date-time-input:focus-within {
        &::part(input) {
            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
        }
    }
}

[part='actions'] {
    min-height: #{sizable(rem(47px), rem(54px), rem(64px))};
}