input.base.scss

@use 'styles/common/component';
@use 'styles/utilities' as *;

%starfix {
    display: flex;
    align-items: center;
}

:host {
    position: relative;
    display: block;
    font-family: var(--ig-font-family);
    outline-style: none;

    ::part(helper-text) {
        @include type-style('caption');
        @include line-clamp(2, true, true);
    }
}

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

[part='label'] {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

[part~='input'] {
    width: 100%;
    border: none;
    outline-style: none;
    font-family: var(--ig-font-family);
    z-index: 1;

    // This is a hack that removes the autofill background and it's essential,
    // otherwise the background is on top of the floating label in material theme.
    // The !important flag is because themes that defin transition delay on that element are overriding the transition delay hack
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active,
    &:autofill,
    &:autofill:hover,
    &:autofill:focus,
    &:autofill:active{
        transition-delay: 99999s !important;
    }
}

[part^='container'] {
    position: relative;
    display: grid;
}

[part='prefix'],
[part='suffix'] {
    display: none;
    overflow: hidden;
}

[part~='prefixed'] {
    [part='prefix'] {
        @extend %starfix;
    }
}

[part~='suffixed'] {
    [part='suffix'] {
        @extend %starfix;
    }
}

:host([required]) {
    [part='label']::after {
        content: '*';
    }
}

:host([disabled]) {
    pointer-events: none;
}