@custom-media --mobile-until (max-width: 30rem);

:host {
    display: block;
    min-width: 0;
    max-width: 100%;
}

.jb-time-input-web-component {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: var(--margin);
    position: relative;

    jb-popover {
        --jb-popover-z-index: var(--popover-z-index);
        position: relative;
        z-index: var(--popover-z-index);

        @media(--mobile-until) {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

        jb-time-picker {
            display: block;
            width: max-content;
            justify-self: center;
            margin-inline: auto;
        }

        .close-time-picker-button {
            display: none;
            margin-top: 1rem;
            justify-self: center;

            @media(--mobile-until) {
                display: block;
            }
        }
    }

}