.jb-switch-web-component:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 0.125rem;
}

:host(:dir(rtl)) {
    /* because chrome still count shadow dom as ltr (its a web-kit bug) we do this so when bug fixes switch will change direction base on :dir() selector */
    direction: rtl;
}

:host(:dir(ltr)) {
    /* because chrome still count shadow dom as ltr (its a web-kit bug) we do this so when bug fixes switch will change direction base on :dir() selector */
    direction: ltr;
}

.jb-switch-web-component {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
    width: fit-content;
    cursor: var(--cursor);

    .caption {
        display: inline-block;
        color: var(--caption-color);
        font-size: var(--caption-font-size);
        font-weight: var(--caption-font-weight);
        transition: var(--transition);

        /* Reserve the active font width so changing weight does not move the switch. */
        &::before {
            display: block;
            height: 0;
            overflow: hidden;
            visibility: hidden;
            content: attr(data-text);
            font-weight: var(--caption-font-weight-active);
        }

        &.--active {
            color: var(--caption-color-active);
            font-weight: var(--caption-font-weight-active);
            transition: var(--transition);
        }
    }

    .svg-wrapper {
        width: var(--width);
        height: var(--height);

        .switch-svg {
            width: var(--width);
            height: var(--height);

            &.--active {
                .trigger-button {
                    &:dir(rtl) {
                        transform: translateX(17.5rem);
                    }

                    &:dir(ltr) {
                        transform: translateX(0px);
                    }
                }

                .trigger-circle-bar {
                    stroke: var(--ring-color-active);
                }

                .trigger-circle {
                    fill: var(--trigger-bg-color-active);
                }

                .bg-bar {
                    fill: var(--bg-color-active);
                }
            }

            .bg-bar {
                fill: var(--bg-color);
                stroke: var(--bar-border-color);
                stroke-width: var(--bar-stroke-width);
                transition: var(--transition);
            }

            .trigger-button {
                transition: var(--transition);

                &:dir(rtl) {
                    transform: translateX(0px);
                }

                &:dir(ltr) {
                    transform: translateX(17.5rem);
                }
            }

            .trigger-circle {
                fill: var(--trigger-bg-color);
                transition: var(--transition);
            }

            .trigger-circle-bar {
                fill: transparent;
                stroke: var(--ring-color);
                stroke-width: var(--trigger-ring-stroke-width);
                transition: var(--transition);
                stroke-dasharray: 800, 800;
                stroke-dashoffset: 0;
                stroke-linecap: round;

                &.--loading {
                    animation: jb-switch-loading-dash var(--loading-animation-duration) ease-in-out infinite;
                }


            }
        }
    }

}

:host(:state(disabled)) .jb-switch-web-component {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

@keyframes jb-switch-loading-dash {
    0% {
        stroke-dasharray: 1, 800;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 600, 800;
        stroke-dashoffset: -600;
    }

    100% {
        stroke-dasharray: 1, 800;
        stroke-dashoffset: 0;
    }
}