:host {
    display: block;
}

:host(:focus),
:host(:focus-visible) {
    outline: none;
}

.jb-date-input-web-component {
    width: 100%;
    margin: var(--margin);
    position: relative;

    &:focus-visible {
        outline: none;
    }

    .calendar-trigger {
        display: var(--calendar-trigger-display, block);
        width: var(--calendar-trigger-width, 1.5rem);
        height: var(--calendar-trigger-height, 1.5rem);
        cursor: pointer;
        object-fit: contain;

        &.--active {
            svg {
                .cls-1 {
                    fill: var(--calendar-icon-color-active);
                }
            }
        }

        svg {
            width: 100%;
            height: 100%;

            .cls-1 {
                fill: var(--calendar-icon-color);

            }
        }
    }
}