/*************************************

Pantalla de producto SELECTORES

**************************************/

/* variables de personalizacion     

    copia estas variables en variables.css 

    --disabled-color:       silver;

    --selected-color:       var(--primary-color);

    --selected-contrast:    var(--primary-contrast);

    --product-select-btn-padding:   0.75rem 1.25rem;

    --product-select-btn-border:    2px silver solid;

    --product-select-btn-bg:        transparent;

    --product-select-btn-border-selected:  2px solid var(--selected-color);

    --product-select-btn-border-disabled:  2px dashed var(--disabled-color);

    --select-attr-text:     "selecciona una opción"; 

    --disabled-attr-text:   "No Disponible";

*/

:root{

    --check-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");

}

/*dropdown*/

.attr-dropdown{

    border:1px solid silver;

    border-radius:var(--default-border-radius);

    margin-bottom:1rem;

}

.attr-dropdown .dropdown-toggle{

    width:100%;

    text-align:left;

    display:flex;

    align-items:center;

}

.attr-dropdown .dropdown-toggle::after{

    display: inline-block;

    margin-left: 0.255em;

    vertical-align: 0.255em;

    content: "";

    border-top: 0.3em solid;

    border-right: 0.3em solid transparent;

    border-bottom: 0;

    border-left: 0.3em solid transparent;

}

.attr-dropdown .bs-product__label__attr{

    margin:0;

    width:100%

}

.attr-dropdown .dropdown-menu{

    max-height: 280px;

    overflow-y: auto;

}

.attr-dropdown .dropdown-item{

    display:flex;

    align-items:center;

}

.attr-dropdown .dropdown-item.attr-none-stock,

.attr-dropdown .dropdown-item.attr-disabled{

    color: silver;

}

.attr-dropdown .dropdown-item.attr-none-stock::after,

.attr-dropdown .dropdown-item.attr-disabled::after{

    content: var(--disabled-attr-text,"No Disponible");

    display:inline-block;

    padding:4px;

    border-radius:var(--default-border-radius);

    background:var(--disabled-color, silver);

    color:white;

    font-size:80%;

    margin-left:auto;

}

.attr-dropdown .attr-color-ball{

    margin-right:.5rem;

}

/* buttons */

.bs-product__label__attr{

    display:block;

}

.bs-product__label__attr::after{

    content: attr(data-info);

    font-weight: var(--font-bold);

    text-transform:capitalize;

}

.bs-product__label__attr[data-info=""]::after{

    content: var(--select-attr-text,"");

    font-weight:inherit;

    text-transform:inherit;

    opacity:.6;

}

.bs-product__label__attr.is-invalid{

    color: var(--danger-color);

    font-weight: var(--font-bold);

}

.btn-attr{

    border:none;

    position:relative;

    display:flex;

    justify-content:center;

    padding: var(--product-select-btn-padding,0.75rem 1.25rem);

    color:inherit;

    border-radius: var(--default-border-radius);

    border: var(--product-select-btn-border, 2px solid silver);

    background: var(--product-select-btn-bg, transparent);

}

button.btn-attr.attr-selected,

button.btn-attr.attr-selected:focus{

    border-color: var(--selected-color ,var(--primary-color)) !important;

}

.btn-attr.attr-selected::after{

    content:"";

    width:1rem;

    height:1rem;

    display:block;

    position:absolute;

    bottom:-2px;

    right:-2px;

    background-image: var(--check-icon);

    background-repeat: no-repeat;

    background-position:center center;

    background-color:var(--selected-color ,var(--primary-color, black));

    border-radius:var(--default-border-radius);

    border: 2px solid white;

}

.btn-attr:not(.btn-color).attr-selected::after{

    border-color:var(--selected-color ,var(--primary-color, black));

}

.btn-color{

    padding:2px;

    border-radius:3rem;

}

.attr-color-ball{

    width:var(--product-attr-color-size, 3rem);

    height:var(--product-attr-color-size, 3rem);

}

.attr-color-ball::after{

    width:var(--product-attr-color-size, 3rem);

    height:var(--product-attr-color-size, 3rem);

    content:"";

    background: var(--color-attr);

    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5) inset;

    border-radius:3rem;

    display:flex;

    align-items:center;

    justify-content:center; 

}

.dropdown-item .attr-color-ball{

    position:relative;

}

.dropdown-item .attr-color-ball,

.dropdown-item .attr-color-ball::after{

    width:2rem;

    height:2rem;

}

.attr-dropdown .dropdown-item.attr-selected.attr-selected{

    background:var(--selected-color ,var(--primary-color, silver));

    color:var(--selected-contrast ,var(--primary-contrast, black));

}

.dropdown-item.attr-selected .attr-color-ball::before{

    content:"";

    width:1rem;

    height:1rem;

    display:block;

    position:absolute;

    bottom:-2px;

    right:-2px;

    z-index:1000;

    background-image: var(--check-icon);

    background-repeat: no-repeat;

    background-position:center center;

    background-color:var(--selected-color ,var(--primary-color, black));

    border-radius:var(--default-border-radius);

    border: 2px solid white;

}

.btn-color.attr-none-stock::before,

.btn-color.attr-disabled::before{

    content:"";

    border-top: solid var(--disabled-color, silver); 2px;

    display: block;

    width:100%;

    position:absolute;

    transform: rotate(-45deg);

    top:50%;

}

.btn-attr.attr-disabled,

.btn-attr.attr-none-stock{

    border-style: dashed !important;

    color:var(--disabled-color, silver);

}

.attr-disabled > .attr-color-ball::after,

.attr-none-stock > .attr-color-ball::after{

    opacity:0.5;

}

/*********** 

tooltip 

************/

.attr-color-ball{

    position:relative;

    display:flex;

    justify-content:center;

}

.btn-color:hover .attr-color-ball::before,

.attr-disabled:not(.btn-color):hover::before,

.attr-none-stock:not(.btn-color):hover::before{  

    position:absolute;

    top:100%;

    font-size:80%;

    background:black;

    color:white;

    z-index:1000;

    white-space: pre;

    padding:4px;

    border-radius:var(--default-border-radius);

}

.btn-color:hover .attr-color-ball::before{

    content:attr(tooltip);

}

.attr-disabled:not(.btn-color):not(.dropdown-item):hover::before,

.attr-none-stock:not(.btn-color):not(.dropdown-item):hover::before{

    content:var(--disabled-attr-text,"No Disponible");;

}

.btn-color.attr-none-stock:hover .attr-color-ball::before,

.btn-color.attr-disabled:hover .attr-color-ball::before{

    content:attr(tooltip) "\a" var(--disabled-attr-text,"No Disponible");;

}

.bs-error-stock{

    display:inline-block;

}

/* selector de variante radio button */

.bs-variant-select{

    display:inline-block;

}

.bs-variant-select .bs-variant-select__input{

    display:none;

}

.bs-variant-select__label{

    padding: var(--product-select-btn-padding,0.75rem 1.25rem);

    border: var(--product-select-btn-border, 2px solid silver);

    border-radius: var(--default-border-radius);

    position:relative;

    background: var(--product-select-btn-bg, transparent);

}

.bs-variant-select .bs-variant-select__input.disabled +.bs-variant-select__label{

    color: var(--disabled-color, silver);

    border: var(--product-select-btn-border-disabled,2px dashed var(--disabled-color, silver)) !important;

}

.bs-variant-select .bs-variant-select__input:checked +.bs-variant-select__label,

.bs-variant-select .bs-variant-select__input.disabled:checked +.bs-variant-select__label{

    border-color:var(--selected-color ,var(--primary-color, black)) !important;   

}

.bs-variant-select .bs-variant-select__input:checked +.bs-variant-select__label::after{

    content:"";

    width:1rem;

    height:1rem;

    display:block;

    position:absolute;

    bottom:-2px;

    right:-2px;

    background-image: var(--check-icon); 

    background-repeat: no-repeat;

    background-position:center center;

    background-color:var(--selected-color ,var(--primary-color, black));

    border-radius:var(--default-border-radius);

}

/*************************************

Pantalla de coleccion: FILTROS

**************************************/

.bs-filter-color-input{

    display:none;

}

.bs-filter-color-label{

    max-width:300px;

    display:flex;

    position:relative;

    align-items:center;

    margin:0;

}

.bs-filter-color-label::before{

    content:"";

    background: var(--attr-code);/*lo define el componente*/ 

    display:block;

    width:var(--filter-attr-color-size, 2rem);

    height:var(--filter-attr-color-size, 2rem);

    border-radius:var(--filter-attr-color-size, 2rem);

    position:relative;

    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5) inset;

    margin-right:.5rem;

}



.bs-filter-color-input:checked+.bs-filter-color-label::after{

    content:"";

    width:1rem;

    height:1rem;

    display:block;

    position:absolute;

    bottom:0;

    left:1rem;

    background-image: var(--check-icon); 

    background-repeat: no-repeat;

    background-position:center center;

    background-color:var(--selected-color ,var(--primary-color, black));

    outline:2px solid white;

    border-radius:4px;

}