/**
 * Color variants
 */

.modal-wrapper {
    &.-primary {
        --modal--background: var(--modal--primary--background, var(--color-primary));
        --modal--border-top-color: var(
            --modal--primary--border-top-color,
            var(--color-primary-shade-50)
        );
        --modal--border-right-color: var(
            --modal--primary--border-right-color,
            var(--color-primary-shade-50)
        );
        --modal--border-bottom-color: var(
            --modal--primary--border-bottom-color,
            var(--color-primary-shade-50)
        );
        --modal--border-left-color: var(
            --modal--primary--border-left-color,
            var(--color-primary-shade-50)
        );
        --modal--color: var(--modal--primary--color, var(--contrast-text-color-primary));
        --modal--header--background: var(
            --modal--primary--header--background,
            var(--color-primary-shade-50)
        );
        --modal--footer--background: var(
            --modal--primary--footer--background,
            var(--color-primary-shade-50)
        );
    }

    &.-secondary {
        --modal--background: var(--modal--secondary--background, var(--color-secondary));
        --modal--border-top-color: var(
            --modal--secondary--border-top-color,
            var(--color-secondary-shade-50)
        );
        --modal--border-right-color: var(
            --modal--secondary--border-right-color,
            var(--color-secondary-shade-50)
        );
        --modal--border-bottom-color: var(
            --modal--secondary--border-bottom-color,
            var(--color-secondary-shade-50)
        );
        --modal--border-left-color: var(
            --modal--secondary--border-left-color,
            var(--color-secondary-shade-50)
        );
        --modal--color: var(--modal--secondary--color, var(--contrast-text-color-secondary));
        --modal--header--background: var(
            --modal--secondary--header--background,
            var(--color-secondary-shade-50)
        );
        --modal--footer--background: var(
            --modal--secondary--footer--background,
            var(--color-secondary-shade-50)
        );
    }

    &.-light {
        --modal--background: var(--modal--light--background, var(--color-white));
        --modal--border-top-color: var(--modal--light--border-top-color, var(--color-light));
        --modal--border-right-color: var(--modal--light--border-right-color, var(--color-light));
        --modal--border-bottom-color: var(--modal--light--border-bottom-color, var(--color-light));
        --modal--border-left-color: var(--modal--light--border-left-color, var(--color-light));
        --modal--color: var(--modal--light--color, var(--contrast-text-color-white));
        --modal--header--background: var(--modal--light--header--background, var(--color-gray-50));
        --modal--footer--background: var(--modal--light--footer--background, var(--color-gray-50));
    }

    &.-dark {
        --modal--background: var(--modal--dark--background, var(--color-dark));
        --modal--border-top-color: var(--modal--dark--border-top-color, var(--color-dark-tint-50));
        --modal--border-right-color: var(
            --modal--dark--border-right-color,
            var(--color-dark-tint-50)
        );
        --modal--border-bottom-color: var(
            --modal--dark--border-bottom-color,
            var(--color-dark-tint-50)
        );
        --modal--border-left-color: var(
            --modal--dark--border-left-color,
            var(--color-dark-tint-50)
        );
        --modal--color: var(--modal--dark--color, var(--contrast-text-color-dark));
        --modal--header--background: var(
            --modal--dark--header--background,
            var(--color-dark-tint-50)
        );
        --modal--footer--background: var(
            --modal--dark--footer--background,
            var(--color-dark-tint-50)
        );
    }

    &.-info {
        --modal--background: var(--modal--info--background, var(--color-info));
        --modal--border-top-color: var(--modal--info--border-top-color, var(--color-info-shade-50));
        --modal--border-right-color: var(
            --modal--info--border-right-color,
            var(--color-info-shade-50)
        );
        --modal--border-bottom-color: var(
            --modal--info--border-bottom-color,
            var(--color-info-shade-50)
        );
        --modal--border-left-color: var(
            --modal--info--border-left-color,
            var(--color-info-shade-50)
        );
        --modal--color: var(--modal--info--color, var(--contrast-text-color-info));
        --modal--header--background: var(
            --modal--info--header--background,
            var(--color-info-shade-50)
        );
        --modal--footer--background: var(
            --modal--info--footer--background,
            var(--color-info-shade-50)
        );
    }

    &.-success {
        --modal--background: var(--modal--success--background, var(--color-success));
        --modal--border-top-color: var(
            --modal--success--border-top-color,
            var(--color-success-shade-50)
        );
        --modal--border-right-color: var(
            --modal--success--border-right-color,
            var(--color-success-shade-50)
        );
        --modal--border-bottom-color: var(
            --modal--success--border-bottom-color,
            var(--color-success-shade-50)
        );
        --modal--border-left-color: var(
            --modal--success--border-left-color,
            var(--color-success-shade-50)
        );
        --modal--color: var(--modal--success--color, var(--contrast-text-color-success));
        --modal--header--background: var(
            --modal--success--header--background,
            var(--color-success-shade-50)
        );
        --modal--footer--background: var(
            --modal--success--footer--background,
            var(--color-success-shade-50)
        );
    }

    &.-warning {
        --modal--background: var(--modal--warning--background, var(--color-warning));
        --modal--border-top-color: var(
            --modal--warning--border-top-color,
            var(--color-warning-shade-50)
        );
        --modal--border-right-color: var(
            --modal--warning--border-right-color,
            var(--color-warning-shade-50)
        );
        --modal--border-bottom-color: var(
            --modal--warning--border-bottom-color,
            var(--color-warning-shade-50)
        );
        --modal--border-left-color: var(
            --modal--warning--border-left-color,
            var(--color-warning-shade-50)
        );
        --modal--color: var(--modal--warning--color, var(--contrast-text-color-warning));
        --modal--header--background: var(
            --modal--warning--header--background,
            var(--color-warning-shade-50)
        );
        --modal--footer--background: var(
            --modal--warning--footer--background,
            var(--color-warning-shade-50)
        );
    }

    &.-danger {
        --modal--background: var(--modal--danger--background, var(--color-danger));
        --modal--border-top-color: var(
            --modal--danger--border-top-color,
            var(--color-danger-shade-50)
        );
        --modal--border-right-color: var(
            --modal--danger--border-right-color,
            var(--color-danger-shade-50)
        );
        --modal--border-bottom-color: var(
            --modal--danger--border-bottom-color,
            var(--color-danger-shade-50)
        );
        --modal--border-left-color: var(
            --modal--danger--border-left-color,
            var(--color-danger-shade-50)
        );
        --modal--color: var(--modal--danger--color, var(--contrast-text-color-danger));
        --modal--header--background: var(
            --modal--danger--header--background,
            var(--color-danger-shade-50)
        );
        --modal--footer--background: var(
            --modal--danger--footer--background,
            var(--color-danger-shade-50)
        );
    }
}