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

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

    &:focus-visible {
        outline: none;
    }
    .calendar-trigger {
        display: var(--jb-date-input-calendar-trigger-display, block);
        width: var(--jb-date-input-calendar-trigger-width, 1.5rem);
        height: var(--jb-date-input-calendar-trigger-height, 1.5rem);
        cursor: pointer;
        object-fit: contain;
        &.--active {
            svg {
                .cls-1 {
                    fill: #1f1735;
                }
            }
        }

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

            .cls-1 {
                fill: #bbb;

            }
        }
    }
}