/* ------------------------------------------------------------------------------
*
*  # Custom color system
*
*  Custom color system styles, includes background, border and text colors
*
*  Version: 1.1
*  Latest update: Oct 20, 2015
*
* ---------------------------------------------------------------------------- */


// Import color variables
@import "palette.less";


// Background colors
// ------------------------------

// Basic colors
.bg {

    // Primary
    &-primary {
        background-color: @color-primary-500;
        border-color: @color-primary-500;
        color: #fff;

        &-300 {
            background-color: @color-primary-300;
            border-color: @color-primary-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-primary-400;
            border-color: @color-primary-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-primary-600;
            border-color: @color-primary-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-primary-700;
            border-color: @color-primary-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-primary-800;
            border-color: @color-primary-800;
            color: #fff;
        }
    }

    // Danger
    &-danger {
        background-color: @color-danger-500;
        border-color: @color-danger-500;
        color: #fff;

        &-300 {
            background-color: @color-danger-300;
            border-color: @color-danger-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-danger-400;
            border-color: @color-danger-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-danger-600;
            border-color: @color-danger-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-danger-700;
            border-color: @color-danger-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-danger-800;
            border-color: @color-danger-800;
            color: #fff;
        }
    }

    // Success
    &-success {
        background-color: @color-success-500;
        border-color: @color-success-500;
        color: #fff;

        &-300 {
            background-color: @color-success-300;
            border-color: @color-success-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-success-400;
            border-color: @color-success-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-success-600;
            border-color: @color-success-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-success-700;
            border-color: @color-success-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-success-800;
            border-color: @color-success-800;
            color: #fff;
        }
    }

    // Warning
    &-warning {
        background-color: @color-warning-500;
        border-color: @color-warning-500;
        color: #fff;

        &-300 {
            background-color: @color-warning-300;
            border-color: @color-warning-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-warning-400;
            border-color: @color-warning-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-warning-600;
            border-color: @color-warning-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-warning-700;
            border-color: @color-warning-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-warning-800;
            border-color: @color-warning-800;
            color: #fff;
        }
    }

    // Info
    &-info {
        background-color: @color-info-500;
        border-color: @color-info-500;
        color: #fff;

        &-300 {
            background-color: @color-info-300;
            border-color: @color-info-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-info-400;
            border-color: @color-info-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-info-600;
            border-color: @color-info-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-info-700;
            border-color: @color-info-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-info-800;
            border-color: @color-info-800;
            color: #fff;
        }
    }

    // Pink
    &-pink {
        background-color: @color-pink-500;
        border-color: @color-pink-500;
        color: #fff;

        &-300 {
            background-color: @color-pink-300;
            border-color: @color-pink-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-pink-400;
            border-color: @color-pink-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-pink-600;
            border-color: @color-pink-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-pink-700;
            border-color: @color-pink-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-pink-800;
            border-color: @color-pink-800;
            color: #fff;
        }
    }

    // Violet
    &-violet {
        background-color: @color-violet-500;
        border-color: @color-violet-500;
        color: #fff;

        &-300 {
            background-color: @color-violet-300;
            border-color: @color-violet-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-violet-400;
            border-color: @color-violet-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-violet-600;
            border-color: @color-violet-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-violet-700;
            border-color: @color-violet-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-violet-800;
            border-color: @color-violet-800;
            color: #fff;
        }
    }

    // Purple
    &-purple {
        background-color: @color-purple-500;
        border-color: @color-purple-500;
        color: #fff;

        &-300 {
            background-color: @color-purple-300;
            border-color: @color-purple-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-purple-400;
            border-color: @color-purple-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-purple-600;
            border-color: @color-purple-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-purple-700;
            border-color: @color-purple-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-purple-800;
            border-color: @color-purple-800;
            color: #fff;
        }
    }

    // Indigo
    &-indigo {
        background-color: @color-indigo-500;
        border-color: @color-indigo-500;
        color: #fff;

        &-300 {
            background-color: @color-indigo-300;
            border-color: @color-indigo-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-indigo-400;
            border-color: @color-indigo-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-indigo-600;
            border-color: @color-indigo-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-indigo-700;
            border-color: @color-indigo-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-indigo-800;
            border-color: @color-indigo-800;
            color: #fff;
        }
    }

    // Blue
    &-blue {
        background-color: @color-blue-500;
        border-color: @color-blue-500;
        color: #fff;

        &-300 {
            background-color: @color-blue-300;
            border-color: @color-blue-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-blue-400;
            border-color: @color-blue-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-blue-600;
            border-color: @color-blue-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-blue-700;
            border-color: @color-blue-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-blue-800;
            border-color: @color-blue-800;
            color: #fff;
        }
    }

    // Teal
    &-teal {
        background-color: @color-teal-500;
        border-color: @color-teal-500;
        color: #fff;

        &-300 {
            background-color: @color-teal-300;
            border-color: @color-teal-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-teal-400;
            border-color: @color-teal-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-teal-600;
            border-color: @color-teal-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-teal-700;
            border-color: @color-teal-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-teal-800;
            border-color: @color-teal-800;
            color: #fff;
        }
    }

    // Green
    &-green {
        background-color: @color-green-500;
        border-color: @color-green-500;
        color: #fff;

        &-300 {
            background-color: @color-green-300;
            border-color: @color-green-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-green-400;
            border-color: @color-green-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-green-600;
            border-color: @color-green-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-green-700;
            border-color: @color-green-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-green-800;
            border-color: @color-green-800;
            color: #fff;
        }
    }

    // Orange
    &-orange {
        background-color: @color-orange-500;
        border-color: @color-orange-500;
        color: #fff;

        &-300 {
            background-color: @color-orange-300;
            border-color: @color-orange-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-orange-400;
            border-color: @color-orange-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-orange-600;
            border-color: @color-orange-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-orange-700;
            border-color: @color-orange-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-orange-800;
            border-color: @color-orange-800;
            color: #fff;
        }
    }

    // Brown
    &-brown {
        background-color: @color-brown-500;
        border-color: @color-brown-500;
        color: #fff;

        &-300 {
            background-color: @color-brown-300;
            border-color: @color-brown-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-brown-400;
            border-color: @color-brown-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-brown-600;
            border-color: @color-brown-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-brown-700;
            border-color: @color-brown-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-brown-800;
            border-color: @color-brown-800;
            color: #fff;
        }
    }

    // Grey
    &-grey {
        background-color: @color-grey-500;
        border-color: @color-grey-500;
        color: #fff;

        &-300 {
            background-color: @color-grey-300;
            border-color: @color-grey-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-grey-400;
            border-color: @color-grey-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-grey-600;
            border-color: @color-grey-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-grey-700;
            border-color: @color-grey-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-grey-800;
            border-color: @color-grey-800;
            color: #fff;
        }
    }

    // Slate
    &-slate {
        background-color: @color-slate-500;
        border-color: @color-slate-500;
        color: #fff;

        &-300 {
            background-color: @color-slate-300;
            border-color: @color-slate-300;
            color: #fff;
        }

        &-400 {
            background-color: @color-slate-400;
            border-color: @color-slate-400;
            color: #fff;
        }

        &-600 {
            background-color: @color-slate-600;
            border-color: @color-slate-600;
            color: #fff;
        }

        &-700 {
            background-color: @color-slate-700;
            border-color: @color-slate-700;
            color: #fff;
        }

        &-800 {
            background-color: @color-slate-800;
            border-color: @color-slate-800;
            color: #fff;
        }
    }

    // White
    &-white {
        background-color: #fff;
        color: @text-color;
    }
}

// Alpha colors
.alpha {

    // Primary
    &-primary {
        background-color: @color-primary-50;
        border-color: @color-primary-600;
    }

    // Danger
    &-danger {
        background-color: @color-danger-50;
        border-color: @color-danger-600;
    }

    // Success
    &-success {
        background-color: @color-success-50;
        border-color: @color-success-600;
    }

    // Warning
    &-warning {
        background-color: @color-warning-50;
        border-color: @color-warning-600;
    }

    // Info
    &-info {
        background-color: @color-info-50;
        border-color: @color-info-600;
    }

    // Pink
    &-pink {
        background-color: @color-pink-50;
        border-color: @color-pink-600;
    }

    // Violet
    &-violet {
        background-color: @color-violet-50;
        border-color: @color-violet-600;
    }

    // Purple
    &-purple {
        background-color: @color-purple-50;
        border-color: @color-purple-600;
    }

    // Indino
    &-indigo {
        background-color: @color-indigo-50;
        border-color: @color-indigo-600;
    }

    // Blue
    &-blue {
        background-color: @color-blue-50;
        border-color: @color-blue-600;
    }

    // Teal
    &-teal {
        background-color: @color-teal-50;
        border-color: @color-teal-600;
    }

    // Green
    &-green {
        background-color: @color-green-50;
        border-color: @color-green-600;
    }

    // Orange
    &-orange {
        background-color: @color-orange-50;
        border-color: @color-orange-600;
    }

    // Brown
    &-brown {
        background-color: @color-brown-50;
        border-color: @color-brown-600;
    }

    // Grey
    &-grey {
        background-color: @color-grey-50;
        border-color: @color-grey-600;
    }

    // Slate
    &-slate {
        background-color: @color-slate-50;
        border-color: @color-slate-600;
    }
}


// Single border colors
// ------------------------------

.border {

    // Primary
    &-primary {
        border-color: @color-primary-500;

        &-300 {
            border-color: @color-primary-300;
        }

        &-400 {
            border-color: @color-primary-400;
        }

        &-600 {
            border-color: @color-primary-600;
        }

        &-700 {
            border-color: @color-primary-700;
        }

        &-800 {
            border-color: @color-primary-800;
        }
    }

    // Danger
    &-danger {
        border-color: @color-danger-500;

        &-300 {
            border-color: @color-danger-300;
        }

        &-400 {
            border-color: @color-danger-400;
        }

        &-600 {
            border-color: @color-danger-600;
        }

        &-700 {
            border-color: @color-danger-700;
        }

        &-800 {
            border-color: @color-danger-800;
        }
    }

    // Success
    &-success {
        border-color: @color-success-500;

        &-300 {
            border-color: @color-success-300;
        }

        &-400 {
            border-color: @color-success-400;
        }

        &-600 {
            border-color: @color-success-600;
        }

        &-700 {
            border-color: @color-success-700;
        }

        &-800 {
            border-color: @color-success-800;
        }
    }

    // Warning
    &-warning {
        border-color: @color-warning-500;

        &-300 {
            border-color: @color-warning-300;
        }

        &-400 {
            border-color: @color-warning-400;
        }

        &-600 {
            border-color: @color-warning-600;
        }

        &-700 {
            border-color: @color-warning-700;
        }

        &-800 {
            border-color: @color-warning-800;
        }
    }

    // Info
    &-info {
        border-color: @color-info-500;

        &-300 {
            border-color: @color-info-300;
        }

        &-400 {
            border-color: @color-info-400;
        }

        &-600 {
            border-color: @color-info-600;
        }

        &-700 {
            border-color: @color-info-700;
        }

        &-800 {
            border-color: @color-info-800;
        }
    }

    // Pink
    &-pink {
        border-color: @color-pink-500;

        &-300 {
            border-color: @color-pink-300;
        }

        &-400 {
            border-color: @color-pink-400;
        }

        &-600 {
            border-color: @color-pink-600;
        }

        &-700 {
            border-color: @color-pink-700;
        }

        &-800 {
            border-color: @color-pink-800;
        }
    }

    // Violet
    &-violet {
        border-color: @color-violet-500;

        &-300 {
            border-color: @color-violet-300;
        }

        &-400 {
            border-color: @color-violet-400;
        }

        &-600 {
            border-color: @color-violet-600;
        }

        &-700 {
            border-color: @color-violet-700;
        }

        &-800 {
            border-color: @color-violet-800;
        }
    }

    // Purple
    &-purple {
        border-color: @color-purple-500;

        &-300 {
            border-color: @color-purple-300;
        }

        &-400 {
            border-color: @color-purple-400;
        }

        &-600 {
            border-color: @color-purple-600;
        }

        &-700 {
            border-color: @color-purple-700;
        }

        &-800 {
            border-color: @color-purple-800;
        }
    }

    // Indino
    &-indigo {
        border-color: @color-indigo-500;

        &-300 {
            border-color: @color-indigo-300;
        }

        &-400 {
            border-color: @color-indigo-400;
        }

        &-600 {
            border-color: @color-indigo-600;
        }

        &-700 {
            border-color: @color-indigo-700;
        }

        &-800 {
            border-color: @color-indigo-800;
        }
    }

    // Blue
    &-blue {
        border-color: @color-blue-500;

        &-300 {
            border-color: @color-blue-300;
        }

        &-400 {
            border-color: @color-blue-400;
        }

        &-600 {
            border-color: @color-blue-600;
        }

        &-700 {
            border-color: @color-blue-700;
        }

        &-800 {
            border-color: @color-blue-800;
        }
    }

    // Teal
    &-teal {
        border-color: @color-teal-500;

        &-300 {
            border-color: @color-teal-300;
        }

        &-400 {
            border-color: @color-teal-400;
        }

        &-600 {
            border-color: @color-teal-600;
        }

        &-700 {
            border-color: @color-teal-700;
        }

        &-800 {
            border-color: @color-teal-800;
        }
    }

    // Green
    &-green {
        border-color: @color-green-500;

        &-300 {
            border-color: @color-green-300;
        }

        &-400 {
            border-color: @color-green-400;
        }

        &-600 {
            border-color: @color-green-600;
        }

        &-700 {
            border-color: @color-green-700;
        }

        &-800 {
            border-color: @color-green-800;
        }
    }

    // Orange
    &-orange {
        border-color: @color-orange-500;

        &-300 {
            border-color: @color-orange-300;
        }

        &-400 {
            border-color: @color-orange-400;
        }

        &-600 {
            border-color: @color-orange-600;
        }

        &-700 {
            border-color: @color-orange-700;
        }

        &-800 {
            border-color: @color-orange-800;
        }
    }

    // Brown
    &-brown {
        border-color: @color-brown-500;

        &-300 {
            border-color: @color-brown-300;
        }

        &-400 {
            border-color: @color-brown-400;
        }

        &-600 {
            border-color: @color-brown-600;
        }

        &-700 {
            border-color: @color-brown-700;
        }

        &-800 {
            border-color: @color-brown-800;
        }
    }

    // Grey
    &-grey {
        border-color: @color-grey-500;

        &-300 {
            border-color: @color-grey-300;
        }

        &-400 {
            border-color: @color-grey-400;
        }

        &-600 {
            border-color: @color-grey-600;
        }

        &-700 {
            border-color: @color-grey-700;
        }

        &-800 {
            border-color: @color-grey-800;
        }
    }

    // Slate
    &-slate {
        border-color: @color-slate-500;

        &-300 {
            border-color: @color-slate-300;
        }

        &-400 {
            border-color: @color-slate-400;
        }

        &-600 {
            border-color: @color-slate-600;
        }

        &-700 {
            border-color: @color-slate-700;
        }

        &-800 {
            border-color: @color-slate-800;
        }
    }

    // White
    &-white {
        border-color: #fff;
    }

    // Default grey
    &-default {
        border-color: @panel-default-border;
    }
}


// Separate border colors
// ------------------------------

// Top
.border-top {

    // Primary
    &-primary {
        border-top-color: @color-primary-500;

        &-300 {
            border-top-color: @color-primary-300;
        }

        &-400 {
            border-top-color: @color-primary-400;
        }

        &-600 {
            border-top-color: @color-primary-600;
        }

        &-700 {
            border-top-color: @color-primary-700;
        }

        &-800 {
            border-top-color: @color-primary-800;
        }
    }

    // Danger
    &-danger {
        border-top-color: @color-danger-500;

        &-300 {
            border-top-color: @color-danger-300;
        }

        &-400 {
            border-top-color: @color-danger-400;
        }

        &-600 {
            border-top-color: @color-danger-600;
        }

        &-700 {
            border-top-color: @color-danger-700;
        }

        &-800 {
            border-top-color: @color-danger-800;
        }
    }

    // Success
    &-success {
        border-top-color: @color-success-500;

        &-300 {
            border-top-color: @color-success-300;
        }

        &-400 {
            border-top-color: @color-success-400;
        }

        &-600 {
            border-top-color: @color-success-600;
        }

        &-700 {
            border-top-color: @color-success-700;
        }

        &-800 {
            border-top-color: @color-success-800;
        }
    }

    // Warning
    &-warning {
        border-top-color: @color-warning-500;

        &-300 {
            border-top-color: @color-warning-300;
        }

        &-400 {
            border-top-color: @color-warning-400;
        }

        &-600 {
            border-top-color: @color-warning-600;
        }

        &-700 {
            border-top-color: @color-warning-700;
        }

        &-800 {
            border-top-color: @color-warning-800;
        }
    }

    // Info
    &-info {
        border-top-color: @color-info-500;

        &-300 {
            border-top-color: @color-info-300;
        }

        &-400 {
            border-top-color: @color-info-400;
        }

        &-600 {
            border-top-color: @color-info-600;
        }

        &-700 {
            border-top-color: @color-info-700;
        }

        &-800 {
            border-top-color: @color-info-800;
        }
    }

    // Pink
    &-pink {
        border-top-color: @color-pink-500;

        &-300 {
            border-top-color: @color-pink-300;
        }

        &-400 {
            border-top-color: @color-pink-400;
        }

        &-600 {
            border-top-color: @color-pink-600;
        }

        &-700 {
            border-top-color: @color-pink-700;
        }

        &-800 {
            border-top-color: @color-pink-800;
        }
    }

    // Violet
    &-violet {
        border-top-color: @color-violet-500;

        &-300 {
            border-top-color: @color-violet-300;
        }

        &-400 {
            border-top-color: @color-violet-400;
        }

        &-600 {
            border-top-color: @color-violet-600;
        }

        &-700 {
            border-top-color: @color-violet-700;
        }

        &-800 {
            border-top-color: @color-violet-800;
        }
    }

    // Purple
    &-purple {
        border-top-color: @color-purple-500;

        &-300 {
            border-top-color: @color-purple-300;
        }

        &-400 {
            border-top-color: @color-purple-400;
        }

        &-600 {
            border-top-color: @color-purple-600;
        }

        &-700 {
            border-top-color: @color-purple-700;
        }

        &-800 {
            border-top-color: @color-purple-800;
        }
    }

    // Indino
    &-indigo {
        border-top-color: @color-indigo-500;

        &-300 {
            border-top-color: @color-indigo-300;
        }

        &-400 {
            border-top-color: @color-indigo-400;
        }

        &-600 {
            border-top-color: @color-indigo-600;
        }

        &-700 {
            border-top-color: @color-indigo-700;
        }

        &-800 {
            border-top-color: @color-indigo-800;
        }
    }

    // Blue
    &-blue {
        border-top-color: @color-blue-500;

        &-300 {
            border-top-color: @color-blue-300;
        }

        &-400 {
            border-top-color: @color-blue-400;
        }

        &-600 {
            border-top-color: @color-blue-600;
        }

        &-700 {
            border-top-color: @color-blue-700;
        }

        &-800 {
            border-top-color: @color-blue-800;
        }
    }

    // Teal
    &-teal {
        border-top-color: @color-teal-500;

        &-300 {
            border-top-color: @color-teal-300;
        }

        &-400 {
            border-top-color: @color-teal-400;
        }

        &-600 {
            border-top-color: @color-teal-600;
        }

        &-700 {
            border-top-color: @color-teal-700;
        }

        &-800 {
            border-top-color: @color-teal-800;
        }
    }

    // Green
    &-green {
        border-top-color: @color-green-500;

        &-300 {
            border-top-color: @color-green-300;
        }

        &-400 {
            border-top-color: @color-green-400;
        }

        &-600 {
            border-top-color: @color-green-600;
        }

        &-700 {
            border-top-color: @color-green-700;
        }

        &-800 {
            border-top-color: @color-green-800;
        }
    }

    // Orange
    &-orange {
        border-top-color: @color-orange-500;

        &-300 {
            border-top-color: @color-orange-300;
        }

        &-400 {
            border-top-color: @color-orange-400;
        }

        &-600 {
            border-top-color: @color-orange-600;
        }

        &-700 {
            border-top-color: @color-orange-700;
        }

        &-800 {
            border-top-color: @color-orange-800;
        }
    }

    // Brown
    &-brown {
        border-top-color: @color-brown-500;

        &-300 {
            border-top-color: @color-brown-300;
        }

        &-400 {
            border-top-color: @color-brown-400;
        }

        &-600 {
            border-top-color: @color-brown-600;
        }

        &-700 {
            border-top-color: @color-brown-700;
        }

        &-800 {
            border-top-color: @color-brown-800;
        }
    }

    // Grey
    &-grey {
        border-top-color: @color-grey-500;

        &-300 {
            border-top-color: @color-grey-300;
        }

        &-400 {
            border-top-color: @color-grey-400;
        }

        &-600 {
            border-top-color: @color-grey-600;
        }

        &-700 {
            border-top-color: @color-grey-700;
        }

        &-800 {
            border-top-color: @color-grey-800;
        }
    }

    // Slate
    &-slate {
        border-top-color: @color-slate-500;

        &-300 {
            border-top-color: @color-slate-300;
        }

        &-400 {
            border-top-color: @color-slate-400;
        }

        &-600 {
            border-top-color: @color-slate-600;
        }

        &-700 {
            border-top-color: @color-slate-700;
        }

        &-800 {
            border-top-color: @color-slate-800;
        }
    }

    // White
    &-white {
        border-top-color: #fff;
    }
}

// Bottom
.border-bottom {

    // Primary
    &-primary {
        border-bottom-color: @color-primary-500;

        &-300 {
            border-bottom-color: @color-primary-300;
        }

        &-400 {
            border-bottom-color: @color-primary-400;
        }

        &-600 {
            border-bottom-color: @color-primary-600;
        }

        &-700 {
            border-bottom-color: @color-primary-700;
        }

        &-800 {
            border-bottom-color: @color-primary-800;
        }
    }

    // Danger
    &-danger {
        border-bottom-color: @color-danger-500;

        &-300 {
            border-bottom-color: @color-danger-300;
        }

        &-400 {
            border-bottom-color: @color-danger-400;
        }

        &-600 {
            border-bottom-color: @color-danger-600;
        }

        &-700 {
            border-bottom-color: @color-danger-700;
        }

        &-800 {
            border-bottom-color: @color-danger-800;
        }
    }

    // Success
    &-success {
        border-bottom-color: @color-success-500;

        &-300 {
            border-bottom-color: @color-success-300;
        }

        &-400 {
            border-bottom-color: @color-success-400;
        }

        &-600 {
            border-bottom-color: @color-success-600;
        }

        &-700 {
            border-bottom-color: @color-success-700;
        }

        &-800 {
            border-bottom-color: @color-success-800;
        }
    }

    // Warning
    &-warning {
        border-bottom-color: @color-warning-500;

        &-300 {
            border-bottom-color: @color-warning-300;
        }

        &-400 {
            border-bottom-color: @color-warning-400;
        }

        &-600 {
            border-bottom-color: @color-warning-600;
        }

        &-700 {
            border-bottom-color: @color-warning-700;
        }

        &-800 {
            border-bottom-color: @color-warning-800;
        }
    }

    // Info
    &-info {
        border-bottom-color: @color-info-500;

        &-300 {
            border-bottom-color: @color-info-300;
        }

        &-400 {
            border-bottom-color: @color-info-400;
        }

        &-600 {
            border-bottom-color: @color-info-600;
        }

        &-700 {
            border-bottom-color: @color-info-700;
        }

        &-800 {
            border-bottom-color: @color-info-800;
        }
    }

    // Pink
    &-pink {
        border-bottom-color: @color-pink-500;

        &-300 {
            border-bottom-color: @color-pink-300;
        }

        &-400 {
            border-bottom-color: @color-pink-400;
        }

        &-600 {
            border-bottom-color: @color-pink-600;
        }

        &-700 {
            border-bottom-color: @color-pink-700;
        }

        &-800 {
            border-bottom-color: @color-pink-800;
        }
    }

    // Violet
    &-violet {
        border-bottom-color: @color-violet-500;

        &-300 {
            border-bottom-color: @color-violet-300;
        }

        &-400 {
            border-bottom-color: @color-violet-400;
        }

        &-600 {
            border-bottom-color: @color-violet-600;
        }

        &-700 {
            border-bottom-color: @color-violet-700;
        }

        &-800 {
            border-bottom-color: @color-violet-800;
        }
    }

    // Purple
    &-purple {
        border-bottom-color: @color-purple-500;

        &-300 {
            border-bottom-color: @color-purple-300;
        }

        &-400 {
            border-bottom-color: @color-purple-400;
        }

        &-600 {
            border-bottom-color: @color-purple-600;
        }

        &-700 {
            border-bottom-color: @color-purple-700;
        }

        &-800 {
            border-bottom-color: @color-purple-800;
        }
    }

    // Indino
    &-indigo {
        border-bottom-color: @color-indigo-500;

        &-300 {
            border-bottom-color: @color-indigo-300;
        }

        &-400 {
            border-bottom-color: @color-indigo-400;
        }

        &-600 {
            border-bottom-color: @color-indigo-600;
        }

        &-700 {
            border-bottom-color: @color-indigo-700;
        }

        &-800 {
            border-bottom-color: @color-indigo-800;
        }
    }

    // Blue
    &-blue {
        border-bottom-color: @color-blue-500;

        &-300 {
            border-bottom-color: @color-blue-300;
        }

        &-400 {
            border-bottom-color: @color-blue-400;
        }

        &-600 {
            border-bottom-color: @color-blue-600;
        }

        &-700 {
            border-bottom-color: @color-blue-700;
        }

        &-800 {
            border-bottom-color: @color-blue-800;
        }
    }

    // Teal
    &-teal {
        border-bottom-color: @color-teal-500;

        &-300 {
            border-bottom-color: @color-teal-300;
        }

        &-400 {
            border-bottom-color: @color-teal-400;
        }

        &-600 {
            border-bottom-color: @color-teal-600;
        }

        &-700 {
            border-bottom-color: @color-teal-700;
        }

        &-800 {
            border-bottom-color: @color-teal-800;
        }
    }

    // Green
    &-green {
        border-bottom-color: @color-green-500;

        &-300 {
            border-bottom-color: @color-green-300;
        }

        &-400 {
            border-bottom-color: @color-green-400;
        }

        &-600 {
            border-bottom-color: @color-green-600;
        }

        &-700 {
            border-bottom-color: @color-green-700;
        }

        &-800 {
            border-bottom-color: @color-green-800;
        }
    }

    // Orange
    &-orange {
        border-bottom-color: @color-orange-500;

        &-300 {
            border-bottom-color: @color-orange-300;
        }

        &-400 {
            border-bottom-color: @color-orange-400;
        }

        &-600 {
            border-bottom-color: @color-orange-600;
        }

        &-700 {
            border-bottom-color: @color-orange-700;
        }

        &-800 {
            border-bottom-color: @color-orange-800;
        }
    }

    // Brown
    &-brown {
        border-bottom-color: @color-brown-500;

        &-300 {
            border-bottom-color: @color-brown-300;
        }

        &-400 {
            border-bottom-color: @color-brown-400;
        }

        &-600 {
            border-bottom-color: @color-brown-600;
        }

        &-700 {
            border-bottom-color: @color-brown-700;
        }

        &-800 {
            border-bottom-color: @color-brown-800;
        }
    }

    // Grey
    &-grey {
        border-bottom-color: @color-grey-500;

        &-300 {
            border-bottom-color: @color-grey-300;
        }

        &-400 {
            border-bottom-color: @color-grey-400;
        }

        &-600 {
            border-bottom-color: @color-grey-600;
        }

        &-700 {
            border-bottom-color: @color-grey-700;
        }

        &-800 {
            border-bottom-color: @color-grey-800;
        }
    }

    // Slate
    &-slate {
        border-bottom-color: @color-slate-500;

        &-300 {
            border-bottom-color: @color-slate-300;
        }

        &-400 {
            border-bottom-color: @color-slate-400;
        }

        &-600 {
            border-bottom-color: @color-slate-600;
        }

        &-700 {
            border-bottom-color: @color-slate-700;
        }

        &-800 {
            border-bottom-color: @color-slate-800;
        }
    }

    // White
    &-white {
        border-bottom-color: #fff;
    }
}

// Left
.border-left {

    // Primary
    &-primary {
        border-left-color: @color-primary-500;

        &-300 {
            border-left-color: @color-primary-300;
        }

        &-400 {
            border-left-color: @color-primary-400;
        }

        &-600 {
            border-left-color: @color-primary-600;
        }

        &-700 {
            border-left-color: @color-primary-700;
        }

        &-800 {
            border-left-color: @color-primary-800;
        }
    }

    // Danger
    &-danger {
        border-left-color: @color-danger-500;

        &-300 {
            border-left-color: @color-danger-300;
        }

        &-400 {
            border-left-color: @color-danger-400;
        }

        &-600 {
            border-left-color: @color-danger-600;
        }

        &-700 {
            border-left-color: @color-danger-700;
        }

        &-800 {
            border-left-color: @color-danger-800;
        }
    }

    // Success
    &-success {
        border-left-color: @color-success-500;

        &-300 {
            border-left-color: @color-success-300;
        }

        &-400 {
            border-left-color: @color-success-400;
        }

        &-600 {
            border-left-color: @color-success-600;
        }

        &-700 {
            border-left-color: @color-success-700;
        }

        &-800 {
            border-left-color: @color-success-800;
        }
    }

    // Warning
    &-warning {
        border-left-color: @color-warning-500;

        &-300 {
            border-left-color: @color-warning-300;
        }

        &-400 {
            border-left-color: @color-warning-400;
        }

        &-600 {
            border-left-color: @color-warning-600;
        }

        &-700 {
            border-left-color: @color-warning-700;
        }

        &-800 {
            border-left-color: @color-warning-800;
        }
    }

    // Info
    &-info {
        border-left-color: @color-info-500;

        &-300 {
            border-left-color: @color-info-300;
        }

        &-400 {
            border-left-color: @color-info-400;
        }

        &-600 {
            border-left-color: @color-info-600;
        }

        &-700 {
            border-left-color: @color-info-700;
        }

        &-800 {
            border-left-color: @color-info-800;
        }
    }

    // Pink
    &-pink {
        border-left-color: @color-pink-500;

        &-300 {
            border-left-color: @color-pink-300;
        }

        &-400 {
            border-left-color: @color-pink-400;
        }

        &-600 {
            border-left-color: @color-pink-600;
        }

        &-700 {
            border-left-color: @color-pink-700;
        }

        &-800 {
            border-left-color: @color-pink-800;
        }
    }

    // Violet
    &-violet {
        border-left-color: @color-violet-500;

        &-300 {
            border-left-color: @color-violet-300;
        }

        &-400 {
            border-left-color: @color-violet-400;
        }

        &-600 {
            border-left-color: @color-violet-600;
        }

        &-700 {
            border-left-color: @color-violet-700;
        }

        &-800 {
            border-left-color: @color-violet-800;
        }
    }

    // Purple
    &-purple {
        border-left-color: @color-purple-500;

        &-300 {
            border-left-color: @color-purple-300;
        }

        &-400 {
            border-left-color: @color-purple-400;
        }

        &-600 {
            border-left-color: @color-purple-600;
        }

        &-700 {
            border-left-color: @color-purple-700;
        }

        &-800 {
            border-left-color: @color-purple-800;
        }
    }

    // Indino
    &-indigo {
        border-left-color: @color-indigo-500;

        &-300 {
            border-left-color: @color-indigo-300;
        }

        &-400 {
            border-left-color: @color-indigo-400;
        }

        &-600 {
            border-left-color: @color-indigo-600;
        }

        &-700 {
            border-left-color: @color-indigo-700;
        }

        &-800 {
            border-left-color: @color-indigo-800;
        }
    }

    // Blue
    &-blue {
        border-left-color: @color-blue-500;

        &-300 {
            border-left-color: @color-blue-300;
        }

        &-400 {
            border-left-color: @color-blue-400;
        }

        &-600 {
            border-left-color: @color-blue-600;
        }

        &-700 {
            border-left-color: @color-blue-700;
        }

        &-800 {
            border-left-color: @color-blue-800;
        }
    }

    // Teal
    &-teal {
        border-left-color: @color-teal-500;

        &-300 {
            border-left-color: @color-teal-300;
        }

        &-400 {
            border-left-color: @color-teal-400;
        }

        &-600 {
            border-left-color: @color-teal-600;
        }

        &-700 {
            border-left-color: @color-teal-700;
        }

        &-800 {
            border-left-color: @color-teal-800;
        }
    }

    // Green
    &-green {
        border-left-color: @color-green-500;

        &-300 {
            border-left-color: @color-green-300;
        }

        &-400 {
            border-left-color: @color-green-400;
        }

        &-600 {
            border-left-color: @color-green-600;
        }

        &-700 {
            border-left-color: @color-green-700;
        }

        &-800 {
            border-left-color: @color-green-800;
        }
    }

    // Orange
    &-orange {
        border-left-color: @color-orange-500;

        &-300 {
            border-left-color: @color-orange-300;
        }

        &-400 {
            border-left-color: @color-orange-400;
        }

        &-600 {
            border-left-color: @color-orange-600;
        }

        &-700 {
            border-left-color: @color-orange-700;
        }

        &-800 {
            border-left-color: @color-orange-800;
        }
    }

    // Brown
    &-brown {
        border-left-color: @color-brown-500;

        &-300 {
            border-left-color: @color-brown-300;
        }

        &-400 {
            border-left-color: @color-brown-400;
        }

        &-600 {
            border-left-color: @color-brown-600;
        }

        &-700 {
            border-left-color: @color-brown-700;
        }

        &-800 {
            border-left-color: @color-brown-800;
        }
    }

    // Grey
    &-grey {
        border-left-color: @color-grey-500;

        &-300 {
            border-left-color: @color-grey-300;
        }

        &-400 {
            border-left-color: @color-grey-400;
        }

        &-600 {
            border-left-color: @color-grey-600;
        }

        &-700 {
            border-left-color: @color-grey-700;
        }

        &-800 {
            border-left-color: @color-grey-800;
        }
    }

    // Slate
    &-slate {
        border-left-color: @color-slate-500;

        &-300 {
            border-left-color: @color-slate-300;
        }

        &-400 {
            border-left-color: @color-slate-400;
        }

        &-600 {
            border-left-color: @color-slate-600;
        }

        &-700 {
            border-left-color: @color-slate-700;
        }

        &-800 {
            border-left-color: @color-slate-800;
        }
    }

    // White
    &-white {
        border-left-color: #fff;
    }
}

// Right
.border-right {

    // Primary
    &-primary {
        border-right-color: @color-primary-500;

        &-300 {
            border-right-color: @color-primary-300;
        }

        &-400 {
            border-right-color: @color-primary-400;
        }

        &-600 {
            border-right-color: @color-primary-600;
        }

        &-700 {
            border-right-color: @color-primary-700;
        }

        &-800 {
            border-right-color: @color-primary-800;
        }
    }

    // Danger
    &-danger {
        border-right-color: @color-danger-500;

        &-300 {
            border-right-color: @color-danger-300;
        }

        &-400 {
            border-right-color: @color-danger-400;
        }

        &-600 {
            border-right-color: @color-danger-600;
        }

        &-700 {
            border-right-color: @color-danger-700;
        }

        &-800 {
            border-right-color: @color-danger-800;
        }
    }

    // Success
    &-success {
        border-right-color: @color-success-500;

        &-300 {
            border-right-color: @color-success-300;
        }

        &-400 {
            border-right-color: @color-success-400;
        }

        &-600 {
            border-right-color: @color-success-600;
        }

        &-700 {
            border-right-color: @color-success-700;
        }

        &-800 {
            border-right-color: @color-success-800;
        }
    }

    // Warning
    &-warning {
        border-right-color: @color-warning-500;

        &-300 {
            border-right-color: @color-warning-300;
        }

        &-400 {
            border-right-color: @color-warning-400;
        }

        &-600 {
            border-right-color: @color-warning-600;
        }

        &-700 {
            border-right-color: @color-warning-700;
        }

        &-800 {
            border-right-color: @color-warning-800;
        }
    }

    // Info
    &-info {
        border-right-color: @color-info-500;

        &-300 {
            border-right-color: @color-info-300;
        }

        &-400 {
            border-right-color: @color-info-400;
        }

        &-600 {
            border-right-color: @color-info-600;
        }

        &-700 {
            border-right-color: @color-info-700;
        }

        &-800 {
            border-right-color: @color-info-800;
        }
    }

    // Pink
    &-pink {
        border-right-color: @color-pink-500;

        &-300 {
            border-right-color: @color-pink-300;
        }

        &-400 {
            border-right-color: @color-pink-400;
        }

        &-600 {
            border-right-color: @color-pink-600;
        }

        &-700 {
            border-right-color: @color-pink-700;
        }

        &-800 {
            border-right-color: @color-pink-800;
        }
    }

    // Violet
    &-violet {
        border-right-color: @color-violet-500;

        &-300 {
            border-right-color: @color-violet-300;
        }

        &-400 {
            border-right-color: @color-violet-400;
        }

        &-600 {
            border-right-color: @color-violet-600;
        }

        &-700 {
            border-right-color: @color-violet-700;
        }

        &-800 {
            border-right-color: @color-violet-800;
        }
    }

    // Purple
    &-purple {
        border-right-color: @color-purple-500;

        &-300 {
            border-right-color: @color-purple-300;
        }

        &-400 {
            border-right-color: @color-purple-400;
        }

        &-600 {
            border-right-color: @color-purple-600;
        }

        &-700 {
            border-right-color: @color-purple-700;
        }

        &-800 {
            border-right-color: @color-purple-800;
        }
    }

    // Indino
    &-indigo {
        border-right-color: @color-indigo-500;

        &-300 {
            border-right-color: @color-indigo-300;
        }

        &-400 {
            border-right-color: @color-indigo-400;
        }

        &-600 {
            border-right-color: @color-indigo-600;
        }

        &-700 {
            border-right-color: @color-indigo-700;
        }

        &-800 {
            border-right-color: @color-indigo-800;
        }
    }

    // Blue
    &-blue {
        border-right-color: @color-blue-500;

        &-300 {
            border-right-color: @color-blue-300;
        }

        &-400 {
            border-right-color: @color-blue-400;
        }

        &-600 {
            border-right-color: @color-blue-600;
        }

        &-700 {
            border-right-color: @color-blue-700;
        }

        &-800 {
            border-right-color: @color-blue-800;
        }
    }

    // Teal
    &-teal {
        border-right-color: @color-teal-500;

        &-300 {
            border-right-color: @color-teal-300;
        }

        &-400 {
            border-right-color: @color-teal-400;
        }

        &-600 {
            border-right-color: @color-teal-600;
        }

        &-700 {
            border-right-color: @color-teal-700;
        }

        &-800 {
            border-right-color: @color-teal-800;
        }
    }

    // Green
    &-green {
        border-right-color: @color-green-500;

        &-300 {
            border-right-color: @color-green-300;
        }

        &-400 {
            border-right-color: @color-green-400;
        }

        &-600 {
            border-right-color: @color-green-600;
        }

        &-700 {
            border-right-color: @color-green-700;
        }

        &-800 {
            border-right-color: @color-green-800;
        }
    }

    // Orange
    &-orange {
        border-right-color: @color-orange-500;

        &-300 {
            border-right-color: @color-orange-300;
        }

        &-400 {
            border-right-color: @color-orange-400;
        }

        &-600 {
            border-right-color: @color-orange-600;
        }

        &-700 {
            border-right-color: @color-orange-700;
        }

        &-800 {
            border-right-color: @color-orange-800;
        }
    }

    // Brown
    &-brown {
        border-right-color: @color-brown-500;

        &-300 {
            border-right-color: @color-brown-300;
        }

        &-400 {
            border-right-color: @color-brown-400;
        }

        &-600 {
            border-right-color: @color-brown-600;
        }

        &-700 {
            border-right-color: @color-brown-700;
        }

        &-800 {
            border-right-color: @color-brown-800;
        }
    }

    // Grey
    &-grey {
        border-right-color: @color-grey-500;

        &-300 {
            border-right-color: @color-grey-300;
        }

        &-400 {
            border-right-color: @color-grey-400;
        }

        &-600 {
            border-right-color: @color-grey-600;
        }

        &-700 {
            border-right-color: @color-grey-700;
        }

        &-800 {
            border-right-color: @color-grey-800;
        }
    }

    // Slate
    &-slate {
        border-right-color: @color-slate-500;

        &-300 {
            border-right-color: @color-slate-300;
        }

        &-400 {
            border-right-color: @color-slate-400;
        }

        &-600 {
            border-right-color: @color-slate-600;
        }

        &-700 {
            border-right-color: @color-slate-700;
        }

        &-800 {
            border-right-color: @color-slate-800;
        }
    }

    // White
    &-white {
        border-right-color: #fff;
    }
}


// Text colors
// ------------------------------

.text {

    // Primary
    &-primary {
        &,
        &:hover,
        &:focus {
            color: @color-primary-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-primary-500!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-primary-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-primary-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-primary-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-primary-800!important;
            }
        }
    }

    // Danger
    &-danger {
        &,
        &:hover,
        &:focus {
            color: @color-danger-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-danger-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-danger-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-danger-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-danger-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-danger-800!important;
            }
        }
    }

    // Success
    &-success {
        &,
        &:hover,
        &:focus {
            color: @color-success-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-success-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-success-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-success-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-success-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-success-800!important;
            }
        }
    }

    // Warning
    &-warning {
        &,
        &:hover,
        &:focus {
            color: @color-warning-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-warning-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-warning-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-warning-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-warning-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-warning-800!important;
            }
        }
    }

    // Info
    &-info {
        &,
        &:hover,
        &:focus {
            color: @color-info-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-info-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-info-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-info-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-info-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-info-800!important;
            }
        }
    }

    // Pink
    &-pink {
        &,
        &:hover,
        &:focus {
            color: @color-pink-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-pink-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-pink-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-pink-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-pink-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-pink-800!important;
            }
        }
    }

    // Violet
    &-violet {
        &,
        &:hover,
        &:focus {
            color: @color-violet-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-violet-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-violet-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-violet-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-violet-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-violet-800!important;
            }
        }
    }

    // Purple
    &-purple {
        &,
        &:hover,
        &:focus {
            color: @color-purple-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-purple-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-purple-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-purple-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-purple-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-purple-800!important;
            }
        }
    }

    // Indino
    &-indigo {
        &,
        &:hover,
        &:focus {
            color: @color-indigo-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-indigo-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-indigo-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-indigo-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-indigo-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-indigo-800!important;
            }
        }
    }

    // Blue
    &-blue {
        &,
        &:hover,
        &:focus {
            color: @color-blue-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-blue-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-blue-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-blue-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-blue-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-blue-800!important;
            }
        }
    }

    // Teal
    &-teal {
        &,
        &:hover,
        &:focus {
            color: @color-teal-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-teal-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-teal-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-teal-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-teal-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-teal-800!important;
            }
        }
    }

    // Green
    &-green {
        &,
        &:hover,
        &:focus {
            color: @color-green-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-green-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-green-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-green-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-green-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-green-800!important;
            }
        }
    }

    // Orange
    &-orange {
        &,
        &:hover,
        &:focus {
            color: @color-orange-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-orange-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-orange-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-orange-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-orange-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-orange-800!important;
            }
        }
    }

    // Brown
    &-brown {
        &,
        &:hover,
        &:focus {
            color: @color-brown-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-brown-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-brown-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-brown-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-brown-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-brown-800!important;
            }
        }
    }

    // Grey
    &-grey {
        &,
        &:hover,
        &:focus {
            color: @color-grey-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-grey-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-grey-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-grey-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-grey-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-grey-800!important;
            }
        }
    }

    // Slate
    &-slate {
        &,
        &:hover,
        &:focus {
            color: @color-slate-500!important;
        }

        &-300 {
            &,
            &:hover,
            &:focus {
                color: @color-slate-300!important;
            }
        }

        &-400 {
            &,
            &:hover,
            &:focus {
                color: @color-slate-400!important;
            }
        }

        &-600 {
            &,
            &:hover,
            &:focus {
                color: @color-slate-600!important;
            }
        }

        &-700 {
            &,
            &:hover,
            &:focus {
                color: @color-slate-700!important;
            }
        }

        &-800 {
            &,
            &:hover,
            &:focus {
                color: @color-slate-800!important;
            }
        }
    }

    // White
    &-white {
        &,
        &:hover,
        &:focus {
            color: #fff!important;
        }
    }

    // Default
    &-default {
        &,
        &:hover,
        &:focus {
            color: @text-color!important;
        }
    }
}