.table-arrangement {
    overflow: hidden;
    border: 1px solid hsla(0, 0%, 100%, 0.25);
    flex: 0 1 calc(33% - var(--gap));
    display: flex;
    filter: saturate(0);
}

.table-arrangement input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    aspect-ratio: 1;
    z-index: 3;
    cursor: pointer;
}

.table-arrangement:hover:has(input:not(:disabled)) {
    background-color: #00593b75;
}

.table-arrangement:has(input:checked) {
    background-color: var(--c5)!important;
}

.table-arrangement:has(input:disabled) {
    background-color: #ff0e0e21;
    filter: saturate(1);
}

.table-arrangement input:disabled ~ * {
    filter: saturate(0);
}

.table-arrangement input:disabled {
    cursor: not-allowed;
}

.table-arrangement:hover,
.table-arrangement:has(input[type="checkbox"]:checked) {
    filter: saturate(1);
}

.table-arrangement>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.table-arrangement .table-img {
    z-index: 1;
}

.table-arrangement div:has(>.plate) {
    z-index: 2;
}

.table-arrangement div:has(>.chair) {
    z-index: -1;
}

.table-arrangement div:has(>.chair) {
    transform: rotate(calc(var(--i) * 90deg));
}

.table-arrangement div:has(>.plate) {
    transform: rotate(calc(var(--i) * 90deg));
}

.table-arrangement .chair {
    position: relative;
    transform: translateX(10%);
    transition: all ease-in-out 550ms calc(var(--i) * 100ms);
}

.table-arrangement .plate {
    position: relative;
    transform: translateX(10%) scale(1.5);
    opacity: 0;
    transition: all ease-in-out 550ms calc(var(--i) * 100ms);
}

.table-arrangement:hover input:not(:disabled) ~ div .chair,
.table-arrangement input[type="checkbox"]~.chair {
    transform: translateX(0%) scale(1);
}

.table-arrangement input[type="checkbox"]:checked~div .plate {
    transform: translateX(0%);
    opacity: 1;
}