// Mixins

// Helper to create css3 vendor prefixes
// @param {property} $property
// @param {string} $val

@mixin vendor-property ($property, $val...) {
    -webkit-#{$property}:   $val;
    -moz-#{$property}:      $val;
    -ms-#{$property}:       $val;
    -o-#{$property}:        $val;
    #{$property}:           $val;
}


// Helper to create Media Queries
// @param {min or max} $val
// @param {width} $query


@mixin respond-to ($val, $query) {
    @media only screen and ($val: $query) {
        @content
    }
}

.main-container {
    background: none;
    @include vendor-property(box-shadow, none);

    .main-panel {
        margin: 0;
    }
}

// Site navigation

.navbar-app {
    margin-left: 10px;
    margin-right: 10px;
}

.pages-navbar {
    background: #fff;
    border-radius: $main-content-border-radius;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid $gray-300;
    padding-top: .7rem;
    padding-bottom: .7rem;

    .nav-link ion-icon {
        vertical-align: top;
    }
}

// Wraps pages navigation onto new line when on smaller screens
.pages-navbar {
    display: flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.pages-navbar .dropdown .dropdown-menu {
    margin: 0;
}

// Shows pages dropdown menu on hover
.pages-navbar .dropdown:hover .pages-nav-dropdown-menu {
    display: block;
}

// Styling for Components with card grid
// Sets up flex row for user card columns
.pages-card-grid {
    display: grid;
    gap: 1rem;
}

// Adds background color of white to pages
.pages-grid-wrapper.background-wrap {
    background-color: #fff;
    padding: 20px 10px;
    box-shadow: 0 0 15px 0px rgba(0,0,0,0.05);
    border-radius: var(--theme-rounded-corners);

    .pages-navbar {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 1px solid $gray-300;
        box-shadow: none;
        margin-top: -20px !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .grid-stack {

        // Adds border and removes box-shadow from items when the background wrapper is set
        .item-shadow,
        .grid-stack-item-content,
        .card.grid-stack-item-content,
        .slider-button,
        .announcement,
        .pages-index .navbar-app {
            box-shadow: none !important;
            border: 1px solid $gray-300;
        }
    }
}

// Pages Fixed/Full width styles
.pages-grid-fixed-width {
    max-width: $max-container-width-xl;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.pages-index:not(.full-width-mode) .pages-grid-full-width {
    @media only screen and (min-width: #{$max-container-width-xl}) {
        margin-left: calc(-100vw / 2 + #{$max-container-width-xl} / 2);
        margin-right: calc(-100vw / 2 + #{$max-container-width-xl} / 2);
    }
}


.lightbox {
    display: none;
}

// Removes padding from pages components
@include media-breakpoint-down(sm) {
    .pages-index .app-main-panel {
        padding: 0;
    }
}

@include media-breakpoint-down(md) {
    .pages-breadcrumb-wrapper {
        max-width: calc(100% - 60px);

        .breadcrumb {
            > .breadcrumb-item {
                &:last-child {
                    width: 100%;
                    font-size: 16px;
                    display: block;
                    padding: 0;
                }

                &:first-child:not(:last-child) {
                    font-size: 0.8rem;
                    display: block;
                    a {
                        font-weight: bold;
                    }
                }

                &:before {
                    display: none;
                }
            }
        }
    }

     // Removes margin from pages menu on mobile
     .pages-navbar {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px){
    // removes unneeded padding on mobile version of dropdown menu
    .pages-navbar .dropdown .dropdown-menu {
        padding: 0;
    }

    // Makes the nav-item and dropdown the same size on mobile.
    .pages-nav .nav-link,
    .pages-nav .dropdown-menu .dropdown-item {
        padding: 10px 15px;
    }
}