// Sidebar

.sidebar,
.sidebar-head {
    transition: background 0.2s ease, width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 1s ease-out;
}

.sidebar {
    background: $black45a !important;
    box-shadow: none;

    @extend %background-blur;

    .sidebar-head {
        background: rgba($white, 0.05) !important;
        min-height: 60px;
        max-height: 60px;
        padding: 2px 20px !important;

        h3 {
            font-size: 0;

            .m-r-5 {
                margin-right: 10px !important;
            }

            i {
                font-size: 20px;
                color: $white70a;
                position: relative;
                top: 7px;
            }

            span {
                cursor: default;
                user-select: none;
            }
        }
    }

    .label {
        padding: 5px 8px;
        margin-top: 5px;
        cursor: pointer;
    }

    .slimScrollBar,
    .slimScrollRail {
        left: 0 !important;
    }
}

@media screen and (min-width: 768px) {
    .sidebar-head {
        h3 {
            padding: 0;

            .m-r-5 {
                margin-right: 5px !important;
            }
        }
    }
}

// Temporarily disabled blurred bg style on mobile due to Safari bug
// Per https://github.com/Burry/Organizr-Plex-Theme/issues/18#issuecomment-502330525
@media screen and (min-width: 768px) {
    .sidebar {
        @include background-shade($black45a, $bg-light, 'fixed');

        &:hover {
            box-shadow: 0 5px 20px $black30a;
        }

        .sidebar-head {
            background: $black15a !important;
        }
    }

    .sidebar-nav {
        background: $black15a;
    }

    .active-tab-Settings,
    body[data-active-tab=''],
    #internal-Settings {
        .sidebar {
            @include background-shade($black45a, $bg-dark, 'fixed');
        }
    }
}

@supports not (backdrop-filter: blur(30px)) {
    .sidebar {
        @include background-shade($black45a, $bg-light, 'fixed');

        &:hover {
            box-shadow: 0 5px 20px $black30a;
        }

        .sidebar-head {
            background: $black15a !important;
        }
    }

    .sidebar-nav {
        background: $black15a;
    }

    .active-tab-Settings,
    body[data-active-tab=''],
    #internal-Settings {
        .sidebar {
            @include background-shade($black45a, $bg-dark, 'fixed');
        }
    }
}

.ping .heartbit {
    z-index: 9;
}

.pingTime {
    right: -25px;
}

// Unsure where this belongs

.nav .open > a {
    background: transparent !important;

    &:focus,
    &:hover {
        background: transparent !important;
    }
}

#side-menu {
    li a {
        color: $white70a;
        font-weight: 600 !important;
        padding: 15px 35px 15px 15px;
        transition: 0.2s ease color;

        &:focus,
        &:hover {
            color: $white;
            background: $white08a !important;
        }

        &.active,
        &:active {
            background: transparent !important;
            color: $white;
            box-shadow: inset 4px 0 0 0 $theme-lighter;
        }
    }
}

.tabLoaded {
    filter: none;
}

.sidebar-tabName {
    top: 19px;
    left: 60px;
    font-size: 15px;
}

// Override Ombi Icon

.sidebar img[src*='ombi'] {
    height: 30px;
    padding-left: 30px;
}
