date-range-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(helper-text) {
        @include type-style('body-2');

        color: var-get($theme, 'helper-text-color');
        grid-auto-rows: minmax(rem(20px), auto);
        padding-inline-start: 0;
	    margin-block-start: rem(4px)
    }
}

:host([readonly]) {
    igc-input::part(container),
    igc-input::part(prefix),
    igc-input::part(suffix),
    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])[invalid]) {
    igc-input::part(input) {
        border-color: var-get($theme, 'error-secondary-color');
    }
}

:host(:not([disabled], [readonly])[invalid]:focus-within) {
    igc-input::part(input) {
        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
    }
}

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

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