.smolc-console-buttons-container {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    border: 0.2em ridge silver;
    border-radius: 0.2em;
    background-color: var(--smolc-flat-metal);
    position: relative;
    box-shadow: 0.1em 0.1em 0.1em black;
    background: radial-gradient(circle at 15% 15%,
            silver 0%,
            rgb(148, 148, 148) 10%,
            var(--smolc-flat-metal) 65%,
            var(--smolc-flat-metal) 75%,
            rgb(31, 31, 31) 100%);
}

.smolc-console-buttons-container .smolc-console-number-buttons,
.smolc-console-buttons-container .smolc-console-ab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em;
}

.smolc-console-buttons-container .smolc-console-ab-buttons {
    margin-right: var(--smolc-button-depth)
}

.smolc-console-buttons-container .smolc-console-number-buttons {
    flex-direction: row-reverse;
}

.smolc-console-buttons-container button,
.smolc-button {
    --smolc-button-bottom-curve: 50% 0.25em;
    --smolc-button-depth: 0.2em;
    --smolc-button-shadow: black;

    font-size: inherit;
    font-family: FT88-Regular;
    font-width: expanded;
    font-stretch: expanded;
    position: relative;
    background-color: rgb(20, 20, 20);
    color: var(--smolc-text-color);
    border-bottom-left-radius: var(--smolc-button-bottom-curve);
    border-bottom-right-radius: var(--smolc-button-bottom-curve);
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    padding: 0.2em 0.1em 0.05em;
    border-style: ridge;
    border-width: 0.15em;
    border-color: var(--smolc-tarnished-gold);
}

.smolc-button:hover {
    filter: brightness(1.65) !important;
    cursor: pointer;
}

.smolc-button:active {
    filter: brightness(0.8) !important;
    border-style: groove;
}

.smolc-console-buttons-container .smolc-console-number-buttons button {
    box-shadow: var(--smolc-button-depth) var(--smolc-button-depth) 0 var(--smolc-button-shadow);
    background-image: radial-gradient(ellipse 100% 90% at 80% 80%,
            rgba(207, 200, 191, 0.6),
            rgba(163, 163, 162, 0.4) 20%,
            rgba(20, 20, 20, 0.4) 60%,
            rgba(20, 20, 20, 0.4) 96%,
            rgba(0, 0, 0, 0.4));
}

.smolc-console-buttons-container .smolc-console-number-buttons button:nth-child(6)::after {
    content: "_";
    position: absolute;
    left: 0.1em;
    top: 0.4em;
}

.smolc-console-buttons-container .smolc-console-ab-buttons button {
    --smolc-button-bottom-curve: 3ch 0.3em;
    box-shadow: calc(var(--smolc-button-depth) * 1) var(--smolc-button-depth) 0 var(--smolc-button-shadow);
    background-image: radial-gradient(ellipse 100% 60% at 70% 90%,
            rgba(207, 200, 191, 0.6),
            rgba(163, 163, 162, 0.4) 20%,
            rgba(20, 20, 20, 0.4) 60%,
            rgba(20, 20, 20, 0.4) 96%,
            rgba(0, 0, 0, 0.4));
}

/* .smolc-console-buttons-container .smolc-console-ab-buttons button:first-child { 
    z-index: 1;
} */

.smolc-console-buttons-container .smolc-console-ab-buttons button:active {
    top: var(--smolc-button-depth);
    left: calc(var(--smolc-button-depth) * 1);
    box-shadow: none;
}

.smolc-console-buttons-container .smolc-console-number-buttons button:active {
    top: var(--smolc-button-depth);
    left: var(--smolc-button-depth);
    box-shadow: none;
}

.smolc-console-buttons-container .smolc-metal-screw {
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: radial-gradient(circle at 25% 25%,
            white 0%,
            rgb(224, 224, 224) 25%,
            rgb(224, 224, 224) 60%,
            rgb(110, 110, 109) 75%,
            rgb(43, 43, 42) 100%);
    overflow: hidden;
    filter: drop-shadow(0.05em 0.05em 0.05em black);
    z-index: 1;
}

.smolc-console-buttons-container .smolc-metal-screw:nth-child(1) {
    top: 0.2em;
    left: 0.2em;
}

.smolc-console-buttons-container .smolc-metal-screw:nth-child(2) {
    top: 0.2em;
    right: 0.2em;
}

.smolc-console-buttons-container .smolc-metal-screw:nth-child(3) {
    bottom: 0.2em;
    left: 0.2em;
}

.smolc-console-buttons-container .smolc-metal-screw:nth-child(4) {
    bottom: 0.2em;
    right: 0.2em;
}

.smolc-console-buttons-container .smolc-metal-screw::after {
    counter-increment: screw;
    content: " ";
    position: absolute;
    top: calc(50% - 0.05em);
    left: 0;
    width: 100%;
    height: 0.1em;
    background-color: #62605e;
}

.smolc-console-buttons-container .smolc-metal-screw:nth-child(1)::after {
    transform: rotate(calc(-1 * 34deg));
}

.smolc-console-buttons-container .smolc-metal-screw:nth-child(2)::after {
    transform: rotate(calc(-2 * 34deg));
}

.smolc-console-buttons-container .smolc-metal-screw:nth-child(3)::after {
    transform: rotate(calc(-3 * 34deg));
}

.smolc-console-buttons-container .smolc-metal-screw:nth-child(4)::after {
    transform: rotate(calc(-4 * 34deg));
}

.smolc-console-buttons-container button.smolc-glowing {
    animation-name: smolc-button-glow;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

}

@keyframes smolc-button-glow {
    0% {
        filter: brightness(1.6);
    }

    100% {
        filter: brightness(1);
    }
}

.smolc-console-buttons-container .smolc-metal-scratch {
    position: absolute;
    height: 100%;
    top: 0;
    aspect-ratio: 1 / 1;
    background-size: contain;
    opacity: 0.4;
    filter: drop-shadow(0 0.05em 0 white);
}

.smolc-console-buttons-container .smolc-metal-scratch:nth-child(3n) {
    left: 50%;
    background-image: url(../assets/images/decorations/scratch_1.png);
}

.smolc-console-buttons-container .smolc-metal-scratch:nth-child(3n + 1) {
    right: -0.2em;
    background-image: url(../assets/images/decorations/scratch_2.png);
}

.smolc-console-buttons-container .smolc-metal-scratch:nth-child(3n + 2) {
    left: 0;
    background-image: url(../assets/images/decorations/scratch_3.png);
}