date-picker.indigo.scss

@use 'sass:map';
@use 'styles/utilities' as *;
@use '../light/themes' as *;
@use '../../../input/themes/light/themes' as input-theme;

$theme: $indigo;
$input-theme: input-theme.$indigo;

:host {
    --calendar-border-color: #{$indigo-calendar-border-color};
    --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};

    igc-icon,
    ::slotted(igc-icon) {
        --size: var(--input-icon) !important;
    }

    igc-dialog[open]::part(base) {
        border-radius: rem(6px);
        box-shadow: var(--ig-elevation-5);
    }

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

    ::part(helper-text) {
        grid-auto-rows: minmax(rem(15px), auto);
    }
}

:host(:focus-within) {
    [part='label'] {
        color: var-get($input-theme, 'focused-secondary-color');
    }
}

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

:host(:not([disabled],[readonly]):state(ig-invalid)),
:host(:not(:disabled,[readonly]):state(ig-invalid)) {
    ::part(helper-text) {
        color: var-get($input-theme, 'helper-text-color');
    }

    igc-date-time-input::part(container) {
        border-color: var-get($theme, 'error-secondary-color');

        &::after {
            background: var-get($theme, 'error-secondary-color');
        }
    }
}

[part='actions'] {
    min-height: #{sizable(rem(40px), rem(44px), rem(48px))};
    padding: pad-block(rem(8px)) pad-inline(rem(16px));
}