@import 'svg-url-encoder.scss';
@import 'variables-custom.scss';

/*===================================
=            Main navbar            =
===================================*/

@function get-color($colorName) {
    @return map-get($colors, $colorName);
}

#website-navbar {
    font-family: 'Roboto Condensed';
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    .navbar-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        margin-top: 1rem;
        .nav-item {
            line-height: 1.25rem;
            justify-content: center;
            align-items: stretch;
            flex-grow: 1;
        }
        .nav-link {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            text-transform: uppercase;
            font-size: 0.875rem;
            padding-left: $nav-link-padding-x;
            padding-right: $nav-link-padding-x;
            padding-top: $nav-link-padding-y;
            padding-bottom: $nav-link-padding-y;
            &:hover,
            &:focus,
            &.active {
                text-decoration: none;
                background-color: get-color(gray-700);
            }
        }
    }
}

@include media-breakpoint-up(lg) {
    #website-navbar {
        box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.24);
        .navbar-nav {
            margin-top: 0;
            .nav-link {
                font-size: 0.8125rem;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
                height: 100%;
            }
        }
        .navbar-brand {
            margin-bottom: 0;
            font-size: 1.0625rem;
        }
    }
}

/*===============================
=            Sidebar            =
===============================*/

@function get-color($colorName) {
    @return map-get($colors, $colorName);
}

$navbar-height: 72px;
$navbar-left-width: 230px;
$navbar-left-color: #fff;
$navbar-left-background: $gray-800;
$navbar-left-active-background: get-color(red-600);

#navbar-left-wrapper {
    display: none;
    position: fixed;
    top: $navbar-height;
    padding-right: 0;
    width: $navbar-left-width;
    height: 100%;
    background-color: $navbar-left-background;
    z-index: 2;
    box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.12), 1px 0px 1px rgba(0, 0, 0, 0.24);
    #navbar-left-collapse {
        display: none;
    }
    ~ .container {
        padding-left: $navbar-left-width;
    }
    @include media-breakpoint-up(lg) {
        display: block;
        ~ .container-fluid {
            padding-left: $navbar-left-width + $grid-gutter-width / 2;
        }
    }
}

/* navbar-left md, sm & xs devices*/

@include media-breakpoint-down(md) {
    #navbar-left-wrapper {
        #navbar-left-collapse {
            display: block;
        }
        ~ .container {
            padding-left: 15px;
        }
    }

    .w3-animate-left {
        position: relative;
        animation: animateleft 0.4s;
    }
    @keyframes animateleft {
        from {
            left: -$navbar-left-width;
            opacity: 0;
        }
        to {
            left: 0;
            opacity: 1;
        }
    }
}

#navbar-left {
    z-index: 100;
    position: relative;
    width: 100%;
    color: $navbar-left-color;
    background-color: $navbar-left-background;

    box-shadow: 0 1px 0 rgba(3, 3, 3, 1);

    ul,
    li {
        margin: 0;
        padding: 0;
    }

    > li {
        /* main links*/
        > a {
            padding: 12px 20px 12px 18px;
            border-top: 1px solid lighten($navbar-left-background, 10%);
            border-bottom: 1px solid darken($navbar-left-background, 8%);
            text-shadow: 1px 1px 0 lighten($navbar-left-background, 10%);
            color: $navbar-left-color;
            background-color: lighten($navbar-left-background, 5%);
            font-size: 13px;
            font-weight: 400;

            i {
                line-height: 20px;
            }
            /* active main links*/
            &:hover,
            &.active {
                background-color: darken($navbar-left-active-background, 5%);
            }
        }

        a[aria-expanded='true'],
        a[aria-expanded='false'] {
            i {
                transition: all 0.3s ease-in;
            }

            &[aria-expanded='true'] {
                i {
                    rotate: -180deg;
                }
                ~ ul {
                    border-top: 1px solid #494f4f;
                    border-bottom: 1px solid #212424;
                }
            }
        }

        /* 2nd level*/
        > ul {
            > li {
                /* all secondary levels links*/
                width: 100%;
                a {
                    font-size: 13px;
                    font-weight: 300;
                    line-height: 20px;
                    display: block;
                    padding: 5px 22px 5px 30px;
                    text-decoration: none;
                    text-shadow: none;
                    border-top: 1px solid lighten($navbar-left-background, 15%);
                    border-bottom: 1px solid darken($navbar-left-background, 5%);
                    text-shadow: 1px 1px 0 lighten($navbar-left-background, 10%);
                    color: $navbar-left-color;
                    background-color: lighten($navbar-left-background, 8%);

                    .badge {
                        text-shadow: none;
                        text-transform: uppercase;
                    }

                    i {
                        line-height: 20px;
                        font-size: 18px;
                    }

                    &:hover,
                    &.active {
                        background-color: $navbar-left-active-background;
                    }
                }

                &:first-child a {
                    border-top: none;
                }

                &:last-child a {
                    border-bottom: none;
                }

                /* 3rd level*/
                > ul {
                    li {
                        /* all secondary levels links*/
                        width: 100%;
                        list-style-type: square;
                        a {
                            font-size: 13px;
                            line-height: 20px;
                            display: block;
                            padding: 5px 22px 5px 40px;
                            text-decoration: none;
                            text-shadow: none;
                            color: transparentize($navbar-left-color, 0.25);
                            background-color: lighten($navbar-left-background, 10%);

                            i {
                                line-height: 20px;
                                font-size: 18px;
                            }

                            &:before {
                                display: inline-block;
                                content: '■';
                                padding-right: 7px;
                            }

                            &:hover,
                            &.active {
                                background-color: lighten($navbar-left-active-background, 10%);
                            }
                        }
                    }
                }
            }
        }
    }
}

/*====================================================
=            timeline list + badge-circle            =
====================================================*/

$tl-circle-size: 50px;
$tl-line-height: 1.5em;
$tl-border-width: 4px;

.badge-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: -($tl-circle-size + $tl-border-width)/2;
    top: -($tl-circle-size + $tl-border-width)/2 + 1px;
    height: $tl-circle-size;
    width: $tl-circle-size;
    min-width: $tl-circle-size;
    font-size: $tl-circle-size/3;
    border-radius: 50%;
}

.list-timeline {
    padding-left: $tl-circle-size/2;
    padding-top: $tl-circle-size/2;
    > li {
        border-left: $tl-border-width solid #ddd;
        .timeline-content {
            position: relative;
            top: -$tl-line-height/2;
        }
        &:last-child {
            border-left: $tl-border-width solid transparent;
        }
    }
}

/* Cards (template isotope grid) */

.grid {
    .card {
        display: block;
        position: relative;
        margin: 0 0 2rem 0;
        transition: box-shadow 0.25s;
        border-radius: 2px;
        padding: 20px;
        display: block;
        color: $gray-dark;
        min-height: 60px;

        .badge {
            position: absolute;
            right: 20px;
            font-size: 12px;
            top: 50%;
            margin-top: -9px;
        }

        &.card-indigo {
            background-color: $indigo;

            .badge {
                background: darken($indigo, 15%);
            }
        }

        &.card-pink {
            background-color: $pink;

            .badge {
                background: darken($pink, 15%);
            }
        }

        &.card-info {
            background-color: get-color(info-500);

            .badge {
                background: darken(get-color(info-500), 15%);
            }
        }

        &.card-primary {
            background-color: get-color(primary-500);
            &.deprecated {
                background-color: transparentize(get-color(primary-500), 0.2);
            }

            .badge {
                background: darken(get-color(primary-500), 15%);
            }
        }

        &.card-success {
            background-color: get-color(success-500);

            .badge {
                background: darken(get-color(success-500), 15%);
            }
        }

        .item {
            color: #fff;
            font-size: 1.0625rem;
        }

        &:hover {
            text-decoration: none;
        }

        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

        &.has-icon {
            padding-left: 85px;
            padding-right: 95px;

            &:before {
                font-family: 'icomoon';
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.75rem;
                color: #fff;
                border-radius: $border-radius 0 0 $border-radius;
                width: 54px;
                height: 100%;
            }

            &:after {
                content: ' ';
                position: absolute;
                top: calc(50% - 6px);
                left: 54px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 6px 0 6px 6px;
            }

            &.card-indigo {
                &:before {
                    text-shadow: 1px 1px 3px darken($indigo, 30%);

                    background: darken($indigo, 15%);
                }

                &:after {
                    border-color: transparent transparent transparent darken($indigo, 15%);
                }

                &:hover {
                    background: lighten($indigo, 7.5%);

                    &:before {
                        background: darken($indigo, 20%);
                    }

                    &:after {
                        border-color: transparent transparent transparent darken($indigo, 20%);
                    }
                }
            }

            &.card-pink {
                &:before {
                    text-shadow: 1px 1px 3px darken($pink, 30%);

                    background: darken($pink, 15%);
                }

                &:after {
                    border-color: transparent transparent transparent darken($pink, 15%);
                }

                &:hover {
                    background: lighten($pink, 7.5%);

                    &:before {
                        background: darken($pink, 20%);
                    }

                    &:after {
                        border-color: transparent transparent transparent darken($pink, 20%);
                    }
                }
            }

            &.card-info {
                &:before {
                    text-shadow: 1px 1px 3px darken(get-color(info-500), 30%);

                    background: darken(get-color(info-500), 15%);
                }

                &:after {
                    border-color: transparent transparent transparent darken(get-color(info-500), 15%);
                }

                &:hover {
                    background: lighten(get-color(info-500), 7.5%);

                    &:before {
                        background: darken(get-color(info-500), 20%);
                    }

                    &:after {
                        border-color: transparent transparent transparent darken(get-color(info-500), 20%);
                    }
                }
            }
            &.card-primary {
                &:before {
                    text-shadow: 1px 1px 3px darken(get-color(primary-500), 30%);

                    background: darken(get-color(primary-500), 15%);
                }

                &:after {
                    border-color: transparent transparent transparent darken(get-color(primary-500), 15%);
                }

                &:hover {
                    background: lighten(get-color(primary-500), 15%);

                    &:before {
                        background: darken(get-color(primary-500), 25%);
                    }

                    &:after {
                        border-color: transparent transparent transparent darken(get-color(primary-500), 25%);
                    }
                }
            }

            &.card-success {
                &:before {
                    text-shadow: 1px 1px 3px darken(get-color(success-500), 30%);

                    background: darken(get-color(success-500), 15%);
                }

                &:after {
                    border-color: transparent transparent transparent darken(get-color(success-500), 15%);
                }

                &:hover {
                    background: lighten(get-color(success-500), 7.5%);

                    &:before {
                        background: darken(get-color(success-500), 20%);
                    }

                    &:after {
                        border-color: transparent transparent transparent darken(get-color(success-500), 20%);
                    }
                }
            }
        }
    }

    .deprecated {
        .card {
            &.card-indigo,
            &.card-info,
            &.card-primary,
            &.card-success {
                h4 {
                    color: darken(get-color(gray-200), 20%);
                }
                background-color: get-color(gray-200);

                .label {
                    background: darken(get-color(gray-200), 15%);
                }
                &.has-icon {
                    &:before {
                        text-shadow: 1px 1px 3px darken(get-color(gray-200), 30%);

                        background: darken(get-color(gray-200), 15%);
                    }

                    &:after {
                        border-color: transparent transparent transparent darken(get-color(gray-200), 15%);
                    }

                    &:hover {
                        background: lighten(get-color(gray-200), 7.5%);

                        &:before {
                            background: darken(get-color(gray-200), 20%);
                        }

                        &:after {
                            border-color: transparent transparent transparent darken(get-color(gray-200), 20%);
                        }
                    }
                }
            }
        }
    }
}

/*============================================
=            responsive card-deck            =
============================================*/

/* Bootstrap 4 breakpoints & gutter*/
$card-grid-breakpoints: (xs: 0, md: 768px, lg: 992px) !default;

/* $grid-gutter-width: 30px !default;*/

/* number of cards per line for each breakpoint*/
$cards-per-line: (
    xs: 1,
    md: 2,
    lg: 3
);

@each $name, $breakpoint in $card-grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
        }
    }
}

/*=============================================
=            Global caret settings            =
=============================================*/

%dropdown-toggle-after {
    line-height: $font-size-base * 1.5;
    position: absolute;
    top: calc(50% - 7px);
    right: $spacer;
    display: block;
    width: 7px;
    height: 14px;
    margin: 0;
    content: ' ';
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
    border: none;
    background-repeat: no-repeat;
}
.dropdown-toggle {
    position: relative;
    padding-right: $spacer * 2.5 !important;
    &:not(.sidebar-toggler):after {
        @extend %dropdown-toggle-after;
    }
    &:not(.dropdown-light):after {
        @include background-svg('<svg aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" class="svg-inline--fa fa-angle-right fa-w-8 fa-2x"><path fill="#{$body-light-color}" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" class=""></path></svg>');
    }
    &.dropdown-light:after {
        @include background-svg('<svg aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" class="svg-inline--fa fa-angle-right fa-w-8 fa-2x"><path fill="#{$gray-100}" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" class=""></path></svg>');
    }
    &[aria-expanded='true']:after {
        transform: rotate(90deg);
    }
}

/*==========================================================================
=            Filetree (http://jsfiddle.net/mehmetatas/fXzHS/2/)            =
==========================================================================*/

.tree li {
    margin: 0 0 !important;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
    small {
        display: inline-block;
    }
}

.tree li::before {
    content: '';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: auto;
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}

.tree li::after {
    content: '';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 20px;
    right: auto;
    left: -20px;
    border-top: 1px solid #ccc;
}

.tree li a[href='#'] {
    display: inline-block;
    vertical-align: top;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;

    &.folder {
        background: #ffe79c;
        border: 1px solid darken(#ffe79c, 30%);
    }

    ~ ul li a.folder ~ ul li a.folder {
        background: lighten(#ffe79c, 10%);
        border: 1px solid darken(#ffe79c, 10%);
        ~ ul li a.folder {
            background: lighten(#ffe79c, 18%);
            border: 1px solid #ffe79c;
        }
    }

    &.file {
        background: lighten(desaturate(get-color(info-500), 20%), 40%);
        border: 1px solid darken(get-color(info-500), 10%);
    }

    ~ ul li a.folder ~ ul li a.folder ~ ul li a.file {
        background: lighten(desaturate(get-color(info-500), 20%), 55%);
        border: 1px solid lighten(get-color(info-500), 18%);
    }
}

/*Remove connectors before root*/
.tree > ul > li::before,
.tree > ul > li::after {
    border: 0;
}

/*Remove connectors after last child*/
.tree li:last-child::before {
    height: 30px;
}

/*Time for some hover effects*/

/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover + ul li a {
    &.folder {
        background: darken(#ffe79c, 10%);
        border: 1px solid darken(#ffe79c, 40%);
    }

    &.file {
        background: lighten(desaturate(get-color(info-500), 20%), 30%);
        border: 1px solid darken(get-color(info-500), 20%);
    }

    color: #000;
}

/*Connector styles on hover*/
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
    border-color: #94a0b4;
}

/*==============================
=            icomoon            =
==============================*/

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?rnh868');
    src: url('../fonts/icomoon.eot?rnh868#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?rnh868') format('truetype'), url('../fonts/icomoon.woff?rnh868') format('woff'),
        url('../fonts/icomoon.svg?rnh868#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-toggle-on:before {
    content: '\e902';
}
.icon-home:before {
    content: '\e901';
}
.icon-pencil2:before {
    content: '\e906';
}
.icon-eyedropper:before {
    content: '\e90a';
}
.icon-paint-format:before {
    content: '\e90c';
}
.icon-images:before {
    content: '\e90e';
}
.icon-cart:before {
    content: '\e93a';
}
.icon-coin-dollar:before {
    content: '\e93b';
}
.icon-lifebuoy:before {
    content: '\e941';
}
.icon-compass2:before {
    content: '\e94a';
}
.icon-calendar:before {
    content: '\e953';
}
.icon-user:before {
    content: '\e971';
}
.icon-users:before {
    content: '\e972';
}
.icon-user-check:before {
    content: '\e975';
}
.icon-spinner4:before {
    content: '\e97d';
}
.icon-search2:before {
    content: '\e986';
}
.icon-key2:before {
    content: '\e98e';
}
.icon-cog:before {
    content: '\e994';
}
.icon-hammer:before {
    content: '\e996';
}
.icon-glass:before {
    content: '\e9a0';
}
.icon-spoon-knife:before {
    content: '\e9a3';
}
.icon-airplane:before {
    content: '\e9af';
}
.icon-truck:before {
    content: '\e9b0';
}
.icon-switch:before {
    content: '\e9b6';
}
.icon-power-cord:before {
    content: '\e9b7';
}
.icon-earth:before {
    content: '\e9ca';
}
.icon-eye:before {
    content: '\e9ce';
}
.icon-eye-plus:before {
    content: '\e9cf';
}
.icon-eye-minus:before {
    content: '\e9d0';
}
.icon-eye-blocked:before {
    content: '\e9d1';
}
.icon-star-empty:before {
    content: '\e9d7';
}
.icon-star-half:before {
    content: '\e9d8';
}
.icon-star-full:before {
    content: '\e9d9';
}
.icon-plus:before {
    content: '\ea0a';
}
.icon-minus:before {
    content: '\ea0b';
}
.icon-info:before {
    content: '\ea0c';
}
.icon-cancel-circle:before {
    content: '\ea0d';
}
.icon-loop2:before {
    content: '\ea2e';
}
.icon-radio-checked:before {
    content: '\ea54';
}
.icon-mail:before {
    content: '\f03b';
}
.icon-mail-read:before {
    content: '\f03c';
}
.icon-search:before {
    content: '\f02e';
}
.icon-newspaper:before {
    content: '\e904';
}
.icon-profile:before {
    content: '\e923';
}
.icon-address-book:before {
    content: '\e944';
}
.icon-user-plus:before {
    content: '\e973';
}
.icon-gift:before {
    content: '\e99f';
}
.icon-arrow-right:before {
    content: '\ea34';
}
.icon-checkbox-unchecked:before {
    content: '\ea53';
}
.icon-upload:before {
    content: '\e961';
}
.icon-database:before {
    content: '\e964';
}
.icon-dynamic:before {
    content: '\e982';
}
.icon-stack:before {
    content: '\e92e';
}
.icon-bubble2:before {
    content: '\e96e';
}
.icon-tree:before {
    content: '\e9bc';
}
.icon-food:before {
    content: '\e600';
}
.icon-phone:before {
    content: '\e601';
}
.icon-car:before {
    content: '\e602';
}
.icon-rocket:before {
    content: '\e603';
}
.icon-chart:before {
    content: '\e604';
}
.icon-comments:before {
    content: '\e605';
}
.icon-check:before {
    content: '\e900';
}
.icon-tag:before {
    content: '\f02b';
}
.icon-check-square-o:before {
    content: '\f046';
}
.icon-chevron-up:before {
    content: '\f077';
}
.icon-chevron-down:before {
    content: '\f078';
}
.icon-key:before {
    content: '\f084';
}
.icon-unlock-alt:before {
    content: '\f13e';
}
.icon-bed:before {
    content: '\f236';
}
.icon-hotel:before {
    content: '\f236';
}

/*==============================
=            alerts            =
==============================*/

.has-icon {
    position: relative;
    &.alert {
        padding-left: 70px;
        &:before {
            padding: 13px 0 0 13px;
            content: ' ';
        }
    }

    &:before {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 50px;
        height: 100%;
        border-radius: 3px 0 0 3px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    &.alert:after {
        position: absolute;
        top: calc(50% - 6px);
        left: 50px;
        width: 0;
        height: 0;
        content: ' ';
        border-width: 6px 0 6px 6px;
        border-style: solid;
    }

    &.has-icon-success {
        &:before {
            background-color: #{$success};
            /* check-circle*/

            @include background-svg('<svg aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-check-circle fa-w-16"><path fill="#{$white}" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" class=""></path></svg>');
            background-size: 30%;
        }
    }

    &.alert-success {
        &:before {
            background-color: #{$success};
            /* check*/

            @include background-svg('<svg aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-check fa-w-16"><path fill="#{$white}" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" class=""></path></svg>');
            background-size: 30%;
        }

        &:after {
            border-color: transparent transparent transparent #{$success};
        }

        .var-value,
        .file-path {
            color: white;
            background-color: #{$success};
        }
    }

    &.alert-info {
        &:before {
            color: #{$info};
            background-color: #{$info};

            @include background-svg('<svg aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" class="svg-inline--fa fa-info fa-w-6"><path fill="#{$white}" d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z" class=""></path></svg>');
            background-size: 11.25%; /* 30% * 192/512*/
        }

        &:after {
            border-color: transparent transparent transparent #{$info};
        }

        .var-value,
        .file-path {
            background-color: #{$info};
        }
    }

    &.alert-warning {
        &:before {
            background-color: #{$warning};

            @include background-svg('<svg aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="exclamation-triangle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-exclamation-triangle fa-w-18"><path fill="#{$white}" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" class=""></path></svg>');
            background-size: 33.75%; /* 30% * 576/512*/
        }

        &:after {
            border-color: transparent transparent transparent #{$warning};
        }
    }

    &.alert-danger {
        &:before {
            background-color: #{$danger};

            @include background-svg('<svg aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="exclamation-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-exclamation-circle fa-w-16"><path fill="#{$white}" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" class=""></path></svg>');
            background-size: 30%;
        }

        &:after {
            border-color: transparent transparent transparent #{$danger};
        }
    }
}

.alert {
    position: relative;
    border: none;

    :first-child {
        margin-top: 0;
    }

    p {
        margin-bottom: 0.5em;

        &:last-child {
            margin-bottom: 0;
        }
    }

    a {
        text-decoration: underline;
    }
}