.o_sale_product_configurator_table {
    div[name="ptal"] > div {
        @include media-breakpoint-up(lg) {
            align-items: center;
        }

        &:has(.form-check) {
            align-items: flex-start;
        }
    }
}

.o_sale_product_configurator_ptav_color {
    border: 5px solid $border-color;
    transition: $input-transition;

    @include o-field-pointer();

    &:before {
        content: "";
        display: block;
        @include o-position-absolute(-3px, -3px, -3px, -3px);
        border: 4px solid $o-view-background-color;
        border-radius: 50%;
        box-shadow: inset 0 0 3px rgba(black, 0.3);
    }

    input {
        margin: 8px;
        height: 13px;
        width: 13px;
        opacity: 0;
    }

    &.active {
        border: 5px solid map-get($theme-colors, 'primary');
    }

    &.custom_value {
        background-image: linear-gradient(to bottom right, #FF0000, #FFF200, #1E9600);
    }

    &.transparent {
        background-image: url(/web/static/img/transparent.png);
    }

    &.css_not_available {
        opacity: 1;

        &:after {
            content: "";
            @include o-position-absolute(-5px, -5px, -5px, -5px);
            border: 2px solid map-get($theme-colors, 'danger');
            border-radius: 50%;
            background: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='39' height='39'><line y2='0' x2='39' y1='39' x1='0' style='stroke:#{map-get($theme-colors, 'danger')};stroke-width:2'/><line y2='1' x2='40' y1='40' x1='1' style='stroke:rgb(255,255,255);stroke-width:1'/></svg>"), "#", "%23") ;
            background-position: center;
            background-repeat: no-repeat;
        }
    }
}

.o_sale_product_configurator_ptav_image {
    border: $border-width * 5 solid $body-bg;
    outline: $border-width * 2 solid $border-color;
    transition: $input-transition;
    height: 62px;
    aspect-ratio: 1;

    &:hover, &.active {
        outline-color: map-get($theme-colors, 'primary');
    }

    &.custom_value {
        background-image: linear-gradient(to bottom right, #FF0000, #FFF200, #1E9600);
    }

    &.transparent {
        background-image: url(/web/static/img/transparent.png);
    }

    &.css_not_available {
        opacity: 1;
        outline-color: map-get($theme-colors, 'danger');

        &:after {
            content: "";
            @include o-position-absolute(-5px, -5px, -5px, -5px);
            background-image: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='39' height='39'><line y2='0' x2='39' y1='39' x1='0' style='stroke:#{map-get($theme-colors, 'danger')};stroke-width:2'/><line y2='1' x2='40' y1='40' x1='1' style='stroke:rgb(255,255,255);stroke-width:1'/></svg>"), "#", "%23") ;
            background-position: center;
            background-repeat: no-repeat;
        }

        &:hover, &.active {
            outline-color: map-get($theme-colors, 'primary');
        }
    }
}

.o_sale_product_configurator_ptav_pills.active label {
    $-btn-secondary-design: map-get($o-btns-bs-override, "secondary");
    
    background-color: map-get($-btn-secondary-design, active-background);
    border-color: map-get($-btn-secondary-design, active-border);
    color: map-get($-btn-secondary-design, active-color);
}

.css_not_available {
    opacity: 0.6;
}

option.css_not_available {
    opacity: 1;
    color: #ccc;
}
