date-picker.fluent.scss

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

$theme: $fluent;

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

    igc-dialog[open]::part(base) {
        border-radius: 0;
    }

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

    ::part(helper-text) {
        grid-auto-rows: minmax(rem(18px), auto);
        margin-block-start: pad-block(rem(5px));
    }
}

:host([required]) {
    [part='label']::after {
        color: var-get($theme, 'error-secondary-color');
    }
}

:host(:not([disabled])[readonly]) {
    igc-date-time-input::part(prefix),
    igc-date-time-input::part(suffix) {
        background: transparent;
    }
}

:host(:not([disabled],[readonly]):state(ig-invalid)) {
    igc-date-time-input::part(container) {
        &::before {
            box-shadow: inset 0 0 0 var(--input-border-size) var-get($theme, 'error-secondary-color');
        }
    }

    igc-date-time-input:focus-within {
        &::part(container)::before {
            box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
        }
    }
}

:host(:disabled),
:host([disabled]) {
    [part='label']::after {
        color: var-get($theme, 'disabled-text-color');
    }
}

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