@mixin summary-variant($link-color, $link-bg, $link-hover-color, $link-hover-bg, $link-active-color, $link-active-bg, $link-disabled-color, $link-disabled-bg) {
    .summary-link {
        background-color: $link-bg;

        &:hover {
            background-color: $link-hover-bg;
        }

        &.active,
        &:focus {
            color: $link-active-color;
            background: $link-active-bg;
        }
    }

    .btn-summary-primary,
    .btn-summary {
        color: $link-color;

        &:hover {
            color: $link-hover-color;
            background: $link-hover-bg;
        }

        &:focus,
        &:active,
        &.active {
            &,
            &:hover,
            &:focus {
                color: $link-active-color;
                background: $link-active-bg;
            }
        }

        &[disabled],
        &.disabled {
            // avoid focus or hover effect on disabled
            &,
            &:hover,
            &:focus {
                color: $link-disabled-color;
                background: $link-disabled-bg;
            }

            // preserve active state on disabled (because active links are disabled)
            &.active {
                &,
                &:hover,
                &:focus {
                    color: $link-active-color;
                    background: $link-active-bg;
                    opacity: 1;
                }
            }
        }
    }
}
