@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-toggle-switch {
    &.dnetor-toggle-switch-layout-01 {
        --wrap_width: 50px;
        --wrap_height: 24px;
        --dot_width: 18px;
        --dot_height: 18px;
        --distance_to_border: 2px;

        --wrap_width_var: 50;
        --dot_width_var: 18;
        --distance_to_border_var: 2;
        --color_label_active: "#08C16A";
        --color_label_normal: "#fff";

        $percentage: calc(
                ((var(--wrap_width_var, 120) -
                var(--dot_width_var, 40) -
                var(--distance_to_border_var, 3) * 2) / var(--dot_width_var, 40)) * 100%
        );

        .dnetor-toggle-switch-header {
            @include d-flex();
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            margin: 0 auto;
            color: #111;
            font-weight: 500;
        }

        .dnetor-toggle-switch-checkbox {
            position: relative;
            width: var(--wrap_width);
            height: var(--wrap_height);
            -webkit-appearance: none;
            appearance: none;
            background: #ddd;
            outline: none;
            border-radius: 2rem;
            cursor: pointer;
            &:before {
                content: "";
                width: var(--dot_width);
                height: var(--dot_height);
                border-radius: 50%;
                background: #fff;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                transition: 0.5s;
                margin-left: var(--distance_to_border);
            }
            &:checked{
                background-color: $accent_color;
                &:before {
                    transform: translate($percentage, -50%);
                }
            }
        }
    }

    &.dnetor-toggle-switch-layout-02 {
        --wrap_width: 260px;
        --wrap_height: 60px;
        --dot_width: 118px;
        --dot_height: 44px;
        --distance_to_border: 7px;

        --wrap_width_var: 260;
        --dot_width_var: 118;
        --distance_to_border_var: 7;
        --color_label_active: #fff;
        --color_label_normal: var(--e-global-color-accent);

        $percentage: calc(
                ((var(--wrap_width_var, 260) -
                var(--dot_width_var, 118) -
                var(--distance_to_border_var, 7) * 2) / var(--dot_width_var, 118)) * 100%
        );

        .dnetor-toggle-switch-header {
            cursor: pointer;
            @include d-flex();
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            margin: 0 auto;
            position: relative;
            width: var(--wrap_width);
            height: var(--wrap_height);

            .dnetor-toggle-switch-checkbox {
                opacity: 0;
                width: 0;
                height: 0;

                + .dnetor-toggle-slider {
                    background-color: white;
                }

                &:checked {
                    + .dnetor-toggle-slider:before {
                        transform: translate($percentage, -50%);
                    }
                }
            }

            .dnetor-toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                -webkit-transition: 0.4s;
                transition: 0.4s;
                border-radius: 50px;
                box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);

                &:before {
                    position: absolute;
                    content: "";
                    height: var(--dot_height);
                    width: var(--dot_width);
                    left: var(--distance_to_border);
                    background-color: var(--e-global-color-accent);
                    -webkit-transition: 0.4s;
                    transition: 0.4s;
                    top: 50%;
                    transform: translateY(-50%);
                    border-radius: 50px;
                }
            }

            .dnetor-toggle-switch-first {
                position: absolute;
                top: 50%;
                left: var(--distance_to_border);
                transform: translateY(-50%);
                display: block;
                width: var(--dot_width);
                text-align: center;
                color: var(--color_label_normal);
                &.label-active {
                    color: var(--color_label_active);
                }
            }

            .dnetor-toggle-switch-last {
                position: absolute;
                top: 50%;
                right: var(--distance_to_border);
                transform: translateY(-50%);
                display: block;
                width: var(--dot_width);
                text-align: center;
                color: var(--color_label_normal);
                &.label-active {
                    color: var(--color_label_active);
                }
            }
        }
    }

    .dnetor-toggle-description{
        text-align: center;
        color: $accent_color;
        margin-top: 18px;
    }

    .dnetor-toggle-content {
        padding-top: 35px;
    }
}