/**
 *  - v2.1.15
 * 
 * Copyright (c) 2025
 * Licensed GPLv2+
 */
.ct-drawer-canvas[data-compare-bar] .ct-compare-bar {
    height: var(--compare-bar-height, 70px);
    padding-block:var(--compare-bar-padding, 15px)}

.ct-compare-bar {
    position: relative;
    background-color: var(--compare-bar-background-color, var(--theme-palette-color-4))
}

.ct-compare-bar .ct-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.ct-compare-bar ul {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    overflow: clip;
    height: calc(var(--compare-bar-height, 70px) - var(--compare-bar-padding, 15px)*2)
}

.ct-compare-bar ul:hover {
    overflow: visible
}

.ct-compare-bar li {
    display: flex;
    justify-content: center;
    position: relative;
    flex: 0 0 calc(var(--compare-bar-height, 70px) - var(--compare-bar-padding, 15px)*2)
}

.ct-compare-bar li .ct-tooltip {
    transform: translate3d(0px, -50px, 0px)
}

.ct-compare-bar li:hover .ct-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0px, -55px, 0px)
}

.ct-compare-bar li:hover .ct-compare-remove {
    opacity: 1
}

.ct-compare-bar .ct-media-container {
    border-radius: 2px
}

.ct-compare-bar .ct-compare-remove {
    position: absolute;
    z-index: 1;
    top: 3px;
    inset-inline-end: 3px;
    display: flex;
    opacity: 0;
    padding: 3px;
    color: #fff;
    background: #d83428;
    border-radius: 2px;
    transition: opacity .15s ease
}

.ct-compare-bar .ct-button {
    gap: 10px;
    margin-left: auto;
    --theme-button-min-height: 40px
}

@media(max-width: 999.98px) {
    .ct-compare-bar .ct-button {
        padding:5px 15px
    }
}

.ct-compare-bar .ct-button svg {
    fill: currentColor
}