$padding: 25px;

.LeftNav {
    background-color: var(--midnight-8);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    width: $leftNavWidth;
    z-index: 2;

    &-title {
        color: var(--white);
        font-size: 18px;
        font-weight: 500;
        padding: $padding;
        position: relative;
        width: $leftNavWidth;
    }

    &-title-link {
        color: var(--white);
        font-size: 18px;
        font-weight: 500;
        padding: $padding;
        position: relative;
        width: $leftNavWidth;
        cursor: pointer;
        text-decoration: none;

        &:hover,
        &:visited {
            text-decoration: none;
            color: var(--white);
        }
    }

    &-title-beta {
        position: absolute;
        right: $padding;
        top: $padding;
        color: var(--gray-500);
        font-size: 1rem;
    }

    &-logo {
        height: 30px;
        margin-right: 5px;
        position: relative;
        top: -5px;
        width: 30px;
    }

    &-menu-items {
        flex-grow: 1;
        font-size: 16px;
    }

    &-menu-item {
        color: var(--gray-300);
        display: block;
        padding: 12px $padding;
        text-decoration: none;

        &:hover {
            background-color: var(--midnight-7);
            color: var(--gray-300);
            text-decoration: none;
        }

        &-selected,
        &-selected:hover {
            background-color: var(--midnight-5);
            color: var(--white);
        }
    }

    .sony-logo {
        height: 55px;
        width: 50px;
    }

    &-group-header {
        color: var(--white);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        opacity: 0.5;
        padding: 12px $padding;
    }

    section {
        margin-top: 16px;
    }
}