@import "../../../plugin-framework/assets/sass/base/config";

.alpus-nested-switcher-wrapper {
    --alpha-switcher-h-align: center;
    --alpha-switcher-toggle-bottom-space: 30px;
    --alpha-switcher-toggle-width: 60px;
    --alpha-switcher-toggle-height: 28px;
    --alpha-switcher-control-bg-color: var(--alpha-primary-color, #08c);
    --alpha-switcher-control-color: #fff;
    --alpha-switcher-between-space: 20px;

    .nav {
        display: flex;
        justify-content: var(--alpha-switcher-h-align);
        align-items: center;
        margin-bottom: var(--alpha-switcher-toggle-bottom-space);
    }

    .switcher-switch span {
        padding: 1rem 0;
        color: var(--alpha-grey-color);

        &:hover {
            cursor: pointer;
        }
    }

    .switcher-switch.active span {
        color: var(--alpha-dark-color);
    }

    .switcher-toggle {
        margin: 0 var(--alpha-switcher-between-space);

        .circle {
            display: block;
            border-radius: 100px;
            background-color: var(--alpha-switcher-control-color);
            width: var(--alpha-switcher-toggle-width);
            height: var(--alpha-switcher-toggle-height);
            left: 0;
            top: 0;
            transition: transform 0.35s cubic-bezier(0.23, 0.46, 0.4, 1);
            transform: translateX(calc(var(--alpha-switcher-toggle-width) - var(--alpha-switcher-toggle-height)));
        }
    }

    .active+.switcher-toggle .circle {
        transform: translateX(calc(-1 * (var(--alpha-switcher-toggle-width) - var(--alpha-switcher-toggle-height))));
    }

    .switcher-toggle-inner {
        display: block;
        width: var(--alpha-switcher-toggle-width);
        height: var(--alpha-switcher-toggle-height);
        background-color: var(--alpha-switcher-control-bg-color);
        border-radius: 100px;
        box-shadow: 0 0 0 4px var(--alpha-switcher-control-bg-color);
        overflow: hidden;
        cursor: pointer;
    }

    .switcher-content:not(.active) {
        display: none;
    }

}