.tab {
    writing-mode: vertical-lr;
    width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6em;
    border: solid 2px rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    background-color: rgba(125, 125, 125, 0.2);
    transition: width 0.1s;
    color: rgba(255, 255, 255, 0.6);
}

.tab:hover {
    width: 3em;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: saturate(160%) brightness(90%);
    cursor: pointer;
    color: #fff;
}

.tab:active {
    mix-blend-mode: overlay;
}

.tab_bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    padding-left: 1em;
    padding-right: 1em;
    border: solid 2px rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    background-color: rgba(125, 125, 125, 0.2);
    transition: height 0.1s;
    color: rgba(255, 255, 255, 0.6);
}

.tab_bottom:hover { 
    height: 3em;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: saturate(160%) brightness(90%);
    cursor: pointer;
    color: #fff;
}

.tab_bottom:active {
    mix-blend-mode: overlay;
}