lightspeeddevelopment/lsx-customizer

@mixin customizer-customizer-body-colours(
    $bg: #f6f6f6,
    $breaker: #9b9b9b,
    $color: #4a4a4a,
    $link: #418ad0,
    $hover: #f7ae00,
    $small: #919191,
    $green: #6baf21
) {
    .content-area {
        .lsx-wc-checkout-steps {
            .lsx-wc-checkout-steps-item {
                color: $green;

                &.lsx-wc-checkout-steps-item-done {
                    @media (max-width: 767px) {
                        .fa-check-circle {
                            background-color: $green;
                            &:after {
                                background-color: #fff;
                            }
                        }
                    }
                }

                &:not(.lsx-wc-checkout-steps-item-done) {
                    @media (max-width: 767px) {
                        & > span,
                        a > span {
                            &:before {
                                background-color: $link;
                                color: #fff;
                            }
                        }
                    }
                }

                &.lsx-wc-checkout-steps-item-current {
                    color: $link;

                    & > span,
                    a > span {
                        @media (max-width: 767px) {
                            &:before {
                                background-color: $link;
                            }
                        }
                    }
                }

                &.lsx-wc-checkout-steps-item-disabled {
                    color: $breaker;
                    .lsx-wc-checkout-steps-counter {
                        background-color: $breaker;
                    }
                    & > span,
                    a > span {
                        @media (max-width: 767px) {
                            &:before {
                                background-color: $breaker;
                            }
                        }
                    }
                }
            }

            .lsx-wc-checkout-steps-counter {
                background-color: $link;
                color: #fff;

                .lsx-wc-checkout-steps-item-current & {
                    background-color: $hover;
                }
                .lsx-wc-checkout-steps-item-disabled & {
                    background-color: $breaker;
                }
            }

            .lsx-wc-checkout-steps-link,
            a.lsx-wc-checkout-steps-link:not(.btn):not(.wp-block-button__link) {
                color: $green;
                &:hover,
                &:focus {
                    @media (max-width: 767px) {
                        color: $link !important;
                    }
                }
            }
        }
    }
    .lsx-block-accordion details summary:before {
        color: $link;
    }
}