:host(:focus-visible) {
    outline: 2px solid var(--jb-time-picker-focus-ring-color, Highlight);
    outline-offset: 2px;
}

.jb-time-picker-web-component {
    width: var(--width);
    height: var(--height);
    /* The picker uses vertical touch dragging for changing time values. Prevent
       the browser from interpreting the same gesture as page navigation/scrolling. */
    touch-action: none;
    border-radius: var(--wrapper-border-radius);
    box-shadow: var(--box-shadow);
    .svg-clock-wrapper {
        padding: var(--clock-padding);
        .svg-clock {
            width: 100%;
            height: 100%;
            overflow: visible;
            filter: var(--clock-filter);
            .outer-circle {
                fill: var(--outer-circle-color);
            }

            .inner-circle {
                fill: var(--inner-circle-color);
            }

            .time-text-wrapper {
                .time-text {
                    font-family: var(--time-text-font-family);
                    font-size: var(--time-text-font-size);
                    font-weight: var(--time-text-font-weight);
                    text-anchor: middle;
                    cursor: var(--time-text-cursor);
                    user-select: none;
                    &.--hidden {
                        display: none;
                    }
                    &.--optional{
                        opacity: var(--optional-text-opacity);
                    }
                }

                &.current-time {
                    .time-text {
                        fill: var(--current-text-color);
                        
                        &.--focused {
                            &.hour-text {
                                fill: var(--hour-color);
                            }

                            &.minute-text {
                                fill: var(--minute-color);
                            }

                            &.second-text {
                                fill: var(--second-color);
                            }
                        }
                    }

                    .separator-text {
                        font-family: var(--time-text-font-family);
                        font-size: var(--separator-text-font-size);
                        font-weight: var(--time-text-font-weight);
                        text-anchor: middle;
                        fill: var(--separator-text-color);
                        user-select: none;
                        &.--hidden {
                            display: none;
                        }
                    }
                }

                &.prev-time {
                    .time-text {
                        fill: var(--prev-text-color);
                    }
                }

                &.next-time {
                    .time-text {
                        fill: var(--next-text-color);
                    }
                }
            }

            .time-indicators {
                fill: var(--indicator-color);

                .hour-symbol {
                    r: var(--hour-indicator-size);
                }

                .minute-symbol {
                    r: var(--minute-indicator-size);
                }

                .second-symbol {
                    r: var(--second-indicator-size);
                }

                .hour-indicator {
                    display: none;
                    &.--focused {
                        display: initial;
                        fill: var(--hour-color);
                    }
                }

                .minute-indicator {
                    display: none;
                    stroke-width: 0.625rem;
                    &.--focused {
                        display: initial;
                        fill: var(--minute-color);
                    }
                }

                .second-indicator {
                    display: none;
                    stroke-width: 0.625rem;

                    &.--focused {
                        display: initial;
                        fill: var(--second-color);
                        &.--hidden {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}