/**
 * Color variants
 */

.button {
    &.-primary {
        --button--background: var(--button--primary--background, var(--color-primary));
        --button--hover--background: var(
            --button--primary--hover--background,
            var(--color-primary-shade-50)
        );
        --button--active--background: var(
            --button--primary--active--background,
            var(--color-primary-shade-100)
        );
        --button--border-top-color: var(
            --button--primary--border-top-color,
            var(--color-primary-shade-50)
        );
        --button--border-right-color: var(
            --button--primary--border-right-color,
            var(--color-primary-shade-50)
        );
        --button--border-bottom-color: var(
            --button--primary--border-bottom-color,
            var(--color-primary-shade-50)
        );
        --button--border-left-color: var(
            --button--primary--border-left-color,
            var(--color-primary-shade-50)
        );
        --button--color: var(--button--primary--color, var(--contrast-text-color-primary));
        --button--link--color: var(--button--primary--link--color, var(--color-primary));
        --button--link--active--color: var(
            --button--primary--link--active--color,
            var(--color-primary-shade-50)
        );
    }

    &.-secondary {
        --button--background: var(--button--secondary--background, var(--color-secondary));
        --button--hover--background: var(
            --button--secondary--hover--background,
            var(--color-secondary-shade-50)
        );
        --button--active--background: var(
            --button--secondary--active--background,
            var(--color-secondary-shade-100)
        );
        --button--border-top-color: var(
            --button--secondary--border-top-color,
            var(--color-secondary-shade-50)
        );
        --button--border-right-color: var(
            --button--secondary--border-right-color,
            var(--color-secondary-shade-50)
        );
        --button--border-bottom-color: var(
            --button--secondary--border-bottom-color,
            var(--color-secondary-shade-50)
        );
        --button--border-left-color: var(
            --button--secondary--border-left-color,
            var(--color-secondary-shade-50)
        );
        --button--color: var(--button--secondary--color, var(--contrast-text-color-secondary));
        --button--link--color: var(--button--secondary--link--color, var(--color-secondary));
        --button--link--active--color: var(
            --button--secondary--link--active--color,
            var(--color-secondary-shade-50)
        );
    }

    &.-light {
        --button--background: var(--button--light--background, var(--color-light));
        --button--hover--background: var(
            --button--light--hover--background,
            var(--color-light-shade-50)
        );
        --button--active--background: var(
            --button--light--active--background,
            var(--color-light-shade-100)
        );
        --button--border-top-color: var(
            --button--light--border-top-color,
            var(--color-light-shade-50)
        );
        --button--border-right-color: var(
            --button--light--border-right-color,
            var(--color-light-shade-50)
        );
        --button--border-bottom-color: var(
            --button--light--border-bottom-color,
            var(--color-light-shade-50)
        );
        --button--border-left-color: var(
            --button--light--border-left-color,
            var(--color-light-shade-50)
        );
        --button--color: var(--button--light--color, var(--contrast-text-color-light));
        --button--link--color: var(--button--light--link--color, var(--color-light));
        --button--link--active--color: var(
            --button--light--link--active--color,
            var(--color-light-shade-100)
        );
    }

    &.-dark {
        --button--background: var(--button--dark--background, var(--color-dark));
        --button--hover--background: var(
            --button--dark--hover--background,
            var(--color-dark-tint-50)
        );
        --button--active--background: var(
            --button--dark--active--background,
            var(--color-dark-tint-100)
        );
        --button--border-top-color: var(
            --button--dark--border-top-color,
            var(--color-dark-tint-50)
        );
        --button--border-right-color: var(
            --button--dark--border-right-color,
            var(--color-dark-tint-50)
        );
        --button--border-bottom-color: var(
            --button--dark--border-bottom-color,
            var(--color-dark-tint-50)
        );
        --button--border-left-color: var(
            --button--dark--border-left-color,
            var(--color-dark-tint-50)
        );
        --button--color: var(--button--dark--color, var(--contrast-text-color-dark));
        --button--link--color: var(--button--dark--link--color, var(--color-dark));
        --button--link--active--color: var(
            --button--dark--link--active--color,
            var(--color-dark-tint-50)
        );
    }

    &.-info {
        --button--background: var(--button--info--background, var(--color-info));
        --button--hover--background: var(
            --button--info--hover--background,
            var(--color-info-shade-50)
        );
        --button--active--background: var(
            --button--info--active--background,
            var(--color-info-shade-100)
        );
        --button--border-top-color: var(
            --button--info--border-top-color,
            var(--color-info-shade-50)
        );
        --button--border-right-color: var(
            --button--info--border-right-color,
            var(--color-info-shade-50)
        );
        --button--border-bottom-color: var(
            --button--info--border-bottom-color,
            var(--color-info-shade-50)
        );
        --button--border-left-color: var(
            --button--info--border-left-color,
            var(--color-info-shade-50)
        );
        --button--color: var(--button--info--color, var(--contrast-text-color-info));
        --button--link--color: var(--button--info--link--color, var(--color-info));
        --button--link--active--color: var(
            --button--info--link--active--color,
            var(--color-info-shade-50)
        );
    }

    &.-success {
        --button--background: var(--button--success--background, var(--color-success));
        --button--hover--background: var(
            --button--success--hover--background,
            var(--color-success-shade-50)
        );
        --button--active--background: var(
            --button--success--active--background,
            var(--color-success-shade-100)
        );
        --button--border-top-color: var(
            --button--success--border-top-color,
            var(--color-success-shade-50)
        );
        --button--border-right-color: var(
            --button--success--border-right-color,
            var(--color-success-shade-50)
        );
        --button--border-bottom-color: var(
            --button--success--border-bottom-color,
            var(--color-success-shade-50)
        );
        --button--border-left-color: var(
            --button--success--border-left-color,
            var(--color-success-shade-50)
        );
        --button--color: var(--button--success--color, var(--contrast-text-color-success));
        --button--link--color: var(--button--success--link--color, var(--color-success));
        --button--link--active--color: var(
            --button--success--link--active--color,
            var(--color-success-shade-50)
        );
    }

    &.-warning {
        --button--background: var(--button--warning--background, var(--color-warning));
        --button--hover--background: var(
            --button--warning--hover--background,
            var(--color-warning-shade-50)
        );
        --button--active--background: var(
            --button--warning--active--background,
            var(--color-warning-shade-100)
        );
        --button--border-top-color: var(
            --button--warning--border-top-color,
            var(--color-warning-shade-50)
        );
        --button--border-right-color: var(
            --button--warning--border-right-color,
            var(--color-warning-shade-50)
        );
        --button--border-bottom-color: var(
            --button--warning--border-bottom-color,
            var(--color-warning-shade-50)
        );
        --button--border-left-color: var(
            --button--warning--border-left-color,
            var(--color-warning-shade-50)
        );
        --button--color: var(--button--warning--color, var(--contrast-text-color-warning));
        --button--link--color: var(--button--warning--link--color, var(--color-warning));
        --button--link--active--color: var(
            --button--warning--link--active--color,
            var(--color-warning-shade-50)
        );
    }

    &.-danger {
        --button--background: var(--button--danger--background, var(--color-danger));
        --button--hover--background: var(
            --button--danger--hover--background,
            var(--color-danger-shade-50)
        );
        --button--active--background: var(
            --button--danger--active--background,
            var(--color-danger-shade-100)
        );
        --button--border-top-color: var(
            --button--danger--border-top-color,
            var(--color-danger-shade-50)
        );
        --button--border-right-color: var(
            --button--danger--border-right-color,
            var(--color-danger-shade-50)
        );
        --button--border-bottom-color: var(
            --button--danger--border-bottom-color,
            var(--color-danger-shade-50)
        );
        --button--border-left-color: var(
            --button--danger--border-left-color,
            var(--color-danger-shade-50)
        );
        --button--color: var(--button--danger--color, var(--contrast-text-color-danger));
        --button--link--color: var(--button--danger--link--color, var(--color-danger));
        --button--link--active--color: var(
            --button--danger--link--active--color,
            var(--color-danger-shade-50)
        );
    }
}