$light: #f9f9f9;
$primary: #613ccd;
$warning: #f1a500;
$info: #07bc94;
$font-family-monospace: monospace;

@import 'bootstrap/scss/_functions.scss';
@import 'bootstrap/scss/_variables.scss';

$bzg-cell-hover-bg: $gray-100;
$list-group-hover-bg: rgba($gray-500, .1);
$list-group-action-hover-color: inherit;
/*$list-group-active-color: inherit;*/

@import "bootstrap/scss/bootstrap.scss";
@import "../../BlazorGrid/Styles/blazorgrid-bootstrap.scss";
@import "font-awesome/css/font-awesome";

body,
app {
    height: 100%;
    width: 100%;
    cursor: default;
    background-color: $body-bg;
    user-select: none;
    overflow-y: scroll;
}

.grid-row.highlighted > * a[href]
{
    color: inherit;
}

code {
    font-size: $font-size-base * 1.1;
    user-select: text;
    cursor: text;
}

pre code {
    font-size: $font-size-base;
}

.pre-scrollable {
    border: $border-width solid $primary;
    background-color: $light;
    border-radius: $border-radius;
    padding: map-get($spacers, 2);
}

.nav {
    .nav-link:not(:disabled) {
        cursor: pointer;
    }

    &.nav-pills, &.nav-tabs {
        .nav-link {
            &:hover {
                background-color: $gray-100;
            }

            &:active {
                background-color: $gray-200;
            }
        }
    }

    &.nav-pills {
        .nav-item + .nav-item {
            margin-left: map-get($spacers, 2);
        }

        .nav-link {
            &.active {
                background-color: $primary;
            }
        }
    }
}

#content {
    min-height: 100vh;
}

.hidden {
    visibility: hidden;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-none {
    overflow: hidden !important;
}

.form-group {
    font-weight: bold;
}

#attributes-example-grid {
    .grid-header.grid-row {
        display: none;
    }
}

.hero {
    display: flex;
    min-height: 100vh;
    background: rgb(23,162,184);
    background: linear-gradient(132deg, darken($primary, 30%) 0%, $primary 30%, $info 85%, lighten($info, 5%) 100%);
    color: $light;
    font-size: $font-size-lg;
    text-shadow: 0 0 5px rgba(0,0,0,.3);

    .badge {
        color: inherit;
        background: rgba(0, 0, 0, .4);
    }

    li .badge {
        font-size: 60%;
    }
}

.sidebar {
    min-width: 200px;
    max-width: 250px;
    background: $white;

    &.sidebar-dark {
        background: $dark;
        color: $light;
        box-shadow: $box-shadow inset;

        .menu {
            .menu-item, .nav-link {
                &.active {
                    &::before {
                        background: lighten($primary, 35%);
                        box-shadow: 0 0 10px 5px rgba($primary, .6);
                    }
                }
            }
        }
    }

    &.sidebar-left, &.sidebar-right {
        z-index: $zindex-modal;
        position: fixed;
        display: none;
        top: 0;
        bottom: 0;
        overflow-y: scroll;
        box-shadow: $box-shadow-lg;

        &.active {
            display: block;
        }
    }

    &.sidebar-left {
        left: 0;
        animation: slideInLeft ease-out 200ms;
    }

    &.sidebar-right {
        right: 0;
        animation: slideInRight ease-out 200ms;
    }

    .menu {
        @extend .list-group;
        @extend .list-group-flush;

        h5 {
            color: inherit;
            opacity: .5;
            @extend .px-1;
            @extend .mx-3;

            &:not(:first-child) {
                @extend .mt-4;
            }
        }

        .menu-item, .nav-link {
            @extend .list-group-item;
            @extend .list-group-item-action;
            border: none !important;
            padding: map-get($spacers, 2) $list-group-item-padding-x;
            white-space: nowrap;
            position: relative;
            background: none;
            color: inherit;

            &:active {
                background: rgba($gray-500, .15);
                color: $list-group-action-hover-color;
            }

            &.active {
                background: none;
                color: inherit;
                font-weight: $font-weight-bold;

                &:hover {
                    background: $list-group-hover-bg;
                }

                &::before {
                    display: block;
                    width: $border-width * 3;
                    content: ' ';
                    height: $line-height-base * 1rem;
                    background: $primary;
                    position: absolute;
                    left: 0;
                    box-shadow: 0 0 10px 1px rgba($primary, .2);
                }
            }
        }
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
