.table-wrapper.configurable{
    display: none;

    .configurable-label{
        font-size: 1.25em;

        .label-attribute-name{
            font-weight: 700;
            color: #333;
        }
    }
    
    .configurable-attr{
        .attr-name{
            display: block;
            margin-top: 1em;
            color: #333;
        }
        .attr-info{
            display: block;
            margin-bottom: 0.5em;
            color: #3d3d3d;
            font-weight: 600;
        }
        .attr-product:not(:has(.attr-enable)){
            display: none;
        }
        .attr-values{
            display: flex;
            gap: 1em;
            vertical-align: middle;
            align-items: center;
            flex-wrap: wrap;

            .attr-value{
                display: flex;
                align-items: center;
                color: #333;
                padding: 8px;
                padding-left: 20px;
                padding-right: 20px;
                border-radius: 2em;
                background: #e9e9e9;
            }

            .attr-selected{
                background: linear-gradient(0deg, #f0c049 0%, #fbdd99 100%);
                border-color: transparent;
            }

            .attr-enable{
                cursor: pointer;
            }

            .attr-enable:not(.attr-selected):hover{
                background: rgba(241,195,82,0.3);
            }

            .attr-disable{
                display: none;
                cursor: not-allowed;
                text-decoration: line-through;
                background: #343434;
                color: white;
            }
        }

        .color-dot{
            display: inline-grid;
            width: 22px;
            height: 22px;
            margin-left: 0.5em;
            border-radius: 50%;
        }
    }

    .configurable-qty{
        .qty-container{
            display: flex;
            align-items: center;
            gap: 1em;
            margin-top: 1.5em;
            margin-bottom: 0.5em;

            .qty-label{
                font-size: 15px;
                color: #333;
                font-weight: bold;
            }

            .custom-qty{
                display: flex;
                align-items: center;
                gap: 5px;
                border-width: 1px;
                border-style: solid;
                border-color: #e6e6e6;
                margin: 0;
                padding: 5px 14px;
                border-radius: 3px;
            }

            .qty-button{
                color: #666666;
                font-weight: bold;
                background: white;
                text-align: center;
                height: 30px;
                width: 30px;
                line-height: 30px;
                border-width: 1px;
                border-style: solid;
                border-color: #e7e7e7;
                margin: 0;
                padding: 0;
                font-size: 15px;
                border-radius: 100%;
            }

            .qty-input{
                border-width: 0;
                border-style: solid;
                border-color: #e6e6e6;
                border-radius: 0;
                color: #000;
                float: left;
                height: 26px;
                padding: 0 5px;
                text-align: center;
                width: 65px !important;
                font-weight: bold;
            }

            .qty-input:focus{
                background: white;
            }
        }
    }
}