.cabinet{
    width: 100%;
}
.cabinet-front{
    position: relative;
    display: flex;
    justify-content: center;
    background-color: rgb(119, 127, 125);
    width: 100%;
    height: var(--cabinet-height);
}
.cabinet-slide{
    position: absolute;
    width: 95%;
    z-index: 1;
    box-shadow: 0 15px 20px -5px;
}
.cabinet-door{
    height: var(--cabinet-height);
    background-color: rgb(119, 127, 125);
    background: linear-gradient(90deg,rgba(127, 133, 130, 1) 0%, rgba(202, 204, 203, 1) 35%, rgba(164, 173, 160, 1) 46%, rgba(102, 110, 108, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px -1px 10px -1px, inset 2px 2px 6px -1px black;
}
.cabinet-handle-button{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1ch;
    font:inherit;
    background:linear-gradient(122deg,rgb(195, 204, 200) 0%, rgb(241, 249, 245) 35%, rgb(227, 237, 222) 46%, rgb(189, 192, 191) 100%);;
    border-radius: 1ch;
    border: none;
    cursor: pointer;
    box-shadow: 1px 1px 10px -1px, inset -2px -2px 6px -1px black;
}
.cabinet-handle{
	font-family: "Special Elite", 'Courier New', Courier, monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:1ch;
    min-height: 3ch;
    background-color: rgb(13, 125, 48);
    border-radius: .5ch;
    color: white;
    box-shadow: -1px -1px 10px 0px, inset 2px 2px 6px -1px black;
    filter: url(/resources/svg/textures.svg#paperdistortion) blur(min(.125px,.025vh));
}

.drawer{
    overflow-y: hidden;
    max-height:0;
    width: 100%;
    display: flex;
    background-color:rgb(44, 29, 22);
    transition: ease-in-out .2s max-height;
    filter: blur(min(.125px,.025vh)) url(/resources/svg/textures.svg#papergrain);
}
.drawer.open{
    transition: ease-in-out .4s max-height;
    max-height:12lh;
    overflow-y: visible;
}

.drawer .tabs{
	font-family: "Special Elite", 'Courier New', Courier, monospace;
    padding: 0;
    list-style-type: none;
    margin: 0;
    display: grid;
    width: 100%;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(16ch, max-content));
    grid-gap: 0;
    justify-content: center;
    padding: initial;
    padding-bottom: 1lh;
    direction : rtl;
    box-shadow: inset 15px 0 20px -5px, inset -15px 0 20px -5px;
}


.tabs, .tabs>.tab{
    transform:rotate(180deg);
}
.tabs>.tab:hover{
    transform:rotate(180deg) translateY(-.5lh);
    z-index: 1;
    cursor: pointer;
}

.tab{
    --tab-color: darksalmon;
    display: inline;
    flex-basis: 16ch;
    border-top-right-radius: 1ch;
    border-top-left-radius: 1ch;
    background-color:var(--tab-color);
    transition: ease-in-out .2s;
    height: 1.5lh;
    z-index: -1;
    direction : ltr;
    box-shadow: inset -3px -3px 2px -1px rgba(0, 0, 0, .5);
}
.tab::before{
    position:absolute;
    z-index: -1;
    width: 100%;
    height: 0lh;
    top: 1.5lh;
    content: " ";
    background-color:var(--tab-color);
    box-shadow: inset -3px -3px 1px -1px rgba(0, 0, 0, .5);
    transition: ease-in-out .2s;
}
.tab button{
    font-family: inherit;
    font-size: inherit;
    color:inherit;
    width:100%;
    border:none;
    background-color: transparent;
}
.tab button:hover{
    cursor: pointer;
}

.tab:hover{
    z-index: 0;
    transform: translateY(-.5lh);
    box-shadow: inset -3px 0 2px -1px rgba(0, 0, 0, .5), 3px -3px 2px -1px rgba(0, 0, 0, .5);
}
.tab:hover::before{
    height: .5lh;
    box-shadow: inset -3px -3px 2px -1px rgba(0, 0, 0, .5), 3px 0 2px -1px rgba(0, 0, 0, .5);
}