@import "prism";
@import "prism-line-numbers";

// EXAMPLES
p.grid-example {
    background-color: $secondary;
    min-height: 30px;
    border-radius: 3px;
}


.example-demo{
    position: relative;
    border: 2px solid $grey-2;
    padding: 80px 46px 46px 46px;
    margin-bottom: 8px;
    &::before{
        content: 'Example';
        position: absolute;
        left: -1;
        top: -1;
        background-color: $primary;
        color: white;
        padding: 8px;
        margin-bottom: 16px;
    }

    .side-bar, #global-header{
        position: static;
    }
}

pre.language-markup{
    border: 2px solid $grey-2;
    // background-color: white !important;
}

.swatch-wrapper{
    margin: 24px 16px;
    display: inline-block;
    width: 20%;
    text-align: center;
     span{
        display: block;
        &.variable{
            font-style: italic;
        }
        &.hex{
            
        }
    }
    .swatch{
        margin: 8px;
        margin-left: 33%;
        width: 60px;
        height: 60px;
        border-radius: 100%;
        
        &.swatch-primary{
            background-color: $primary;
        }

        &.swatch-primary-dark{
            background-color: $primary-dark;
        }
        &.swatch-primary-darker{
            background-color: $primary-darker;
        }
        &.swatch-primary-darkest{
            background-color: $primary-darkest;
        }
        &.swatch-primary-light{
            background-color: $primary-light;
        }
        &.swatch-primary-lighter{
            background-color: $primary-lighter;
        }
        &.swatch-primary-lightest{
            background-color: $primary-lightest;
        }


        &.swatch-secondary{
            background-color: $secondary;
        }
        &.swatch-secondary-dark{
            background-color: $secondary-dark;
        }
        &.swatch-secondary-darker{
            background-color: $secondary-darker;
        }
        &.swatch-secondary-darkest{
            background-color: $secondary-darkest;
        }
        &.swatch-secondary-light{
            background-color: $secondary-light;
        }
        &.swatch-secondary-lighter{
            background-color: $secondary-lighter;
        }
        &.swatch-secondary-lightest{
            background-color: $secondary-lightest;
        }
        &.swatch-success{
            background-color: $success;
        }
        &.swatch-success-dark{
            background-color: $success-dark;
        }
        &.swatch-success-darker{
            background-color: $success-darker;
        }
        &.swatch-success-darkest{
            background-color: $success-darkest;
        }
        &.swatch-success-light{
            background-color: $success-light;
        }
        &.swatch-success-lighter{
            background-color: $success-lighter;
        }
        &.swatch-success-lightest{
            background-color: $success-lightest;
        }

        &.swatch-error{
            background-color: $error;
        }
        &.swatch-error-dark{
            background-color: $error-dark;
        }
        &.swatch-error-darker{
            background-color: $error-darker;
        }
        &.swatch-error-darkest{
            background-color: $error-darkest;
        }
        &.swatch-error-light{
            background-color: $error-light;
        }
        &.swatch-error-lighter{
            background-color: $error-lighter;
        }
        &.swatch-error-lightest{
            background-color: $error-lightest;
        }

        &.swatch-warning{
            background-color: $warning;
        }        
        &.swatch-warning-dark{
            background-color: $warning-dark;
        }
        &.swatch-warning-darker{
            background-color: $warning-darker;
        }
        &.swatch-warning-darkest{
            background-color: $warning-darkest;
        }
        &.swatch-warning-light{
            background-color: $warning-light;
        }
        &.swatch-warning-lighter{
            background-color: $warning-lighter;
        }
        &.swatch-warning-lightest{
            background-color: $warning-lightest;
        }        
        

        &.swatch-text-primary{
            background-color: $text-primary-colour;
        }

        &.swatch-text-secondary{
            background-color: $text-secondary-colour;
        }
        &.swatch-link{
            background-color: $link-colour;
        }
        &.swatch-link-hover{
            background-color: $link-hover-colour;
        }
        &.swatch-focus{
            background-color: $focus-colour;
        }
        &.swatch-visited{
            background-color: $visited-colour;
        }
        &.swatch-black{
            background-color: $black;
        }
        &.swatch-grey-1{
            background-color: $grey-1;
        }
        &.swatch-grey-2{
            background-color: $grey-2;
        }
        &.swatch-grey-3{
            background-color: $grey-3;
        }
        &.swatch-grey-4{
            background-color: $grey-4;
        }
        &.swatch-alpha{
            background-color: $alpha;
        }
        &.swatch-beta{
            background-color: $beta;
        }
        &.swatch-discovery{
            background-color: $discovery;
        }
        &.swatch-live{
            background-color: $live;
        }
        &.swatch-gov-uk-blue{
            background-color: $gov-uk-blue;
        }
        &.swatch-mellow-red{
            background-color: $mellow-red;
        }
        &.swatch-mauve{
            background-color: $mauve;
        }
        &.swatch-baby-pink{
            background-color: $baby-pink;
        }
        &.swatch-green{
            background-color: $green;
        }
        &.swatch-light-blue{
            background-color: $light-blue;
        }
        &.swatch-brown{
            background-color: $brown;
        }                                    
    }
}