.facet-column {
    display: block;
    width: $facet-column-width;
    max-width: $facet-column-max-width;
    margin-right: 0;
    padding: $facet-column-padding-y $facet-column-padding-right $facet-column-padding-y $facet-column-padding-left;
    border-right: $default-border;
}

.facet {
    position: relative;
    margin: $facet-margin-y 0;
    padding-bottom: $facet-spacing;
    background: var(--white);
    border: 1px solid rgb(var(--deprecated-heather-rgb) / 30%);
    border-radius: $big-border-radius;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
}

.facet-header {
    position: relative;
    clear: both;
    padding: $button-padding-x;
    background: var(--grey-20);
    border-top-left-radius: $big-border-radius;
    border-top-right-radius: $big-border-radius;
}

.facet-header-eraser {
    position: absolute;
    top: 0;
    right: $facet-header-eraser-right-position;
    height: 100%;
    cursor: pointer;

    svg {
        position: relative;
        top: 50%;
        display: block;
        color: var(--grey-60);
        transform: translateY(-50%);

        &:hover {
            color: var(--navy-blue-80);
        }
    }
}

.remove-selected-tooltip {
    display: block;
    height: 100%;
}

.facet-header-title {
    color: var(--title-text-color);
    font-size: #{$title-font-size};
    line-height: 20px;
}

.facet-values {
    margin: 0;
    padding-top: $facet-value-spacing;
    list-style: none;
}

.facet-value {
    position: relative;
    margin: 0;
    padding: 0 $facet-spacing;

    &:hover {
        background-color: var(--grey-20);

        .exclude-button {
            display: flex;
        }
    }
}

.facet-value-label {
    display: flex;
    justify-content: space-between;
    padding: $facet-value-spacing 0;
    font-size: var(--default-font-size);
    line-height: $facet-value-line-height;
    cursor: pointer;

    button {
        line-height: inherit;
    }

    .label {
        display: block;
        flex-grow: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .coveo-checkbox-button {
        flex-shrink: 0;
    }
}

.facet-value-count {
    padding-left: $facet-value-spacing;
    color: var(--grey-60);
}

.facet-more {
    &:hover .facet-more-button {
        border-style: solid;
    }

    .label {
        color: var(--links-color);
    }
}

.facet-exclude {
    padding-right: $facet-exclude-padding-right;
}

.text-exclude {
    text-decoration: line-through;
}

.exclude-icon {
    position: relative;
    display: none;

    svg {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.exclude-button {
    display: none;

    svg {
        color: var(--grey-60);
    }

    &:hover svg {
        color: var(--navy-blue-80);
    }
}

.facet-exclude-button {
    position: absolute;
    top: 0;
    right: 0;
    width: $facet-exclude-padding-right;
    height: 100%;
    padding-bottom: 2px;
    cursor: pointer;

    + .checkbox-label > .exclude-box,
    &:hover + .checkbox-label > button {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--white);
        border: $checkbox-default-border;

        &::before {
            content: none;
        }

        .exclude-icon {
            display: block;
            color: var(--critical-70);
        }
    }
}

.coveo-checkbox:checked + .exclude-button {
    display: none;
}

.facet-more-button {
    float: left;
    border: $facet-more-button-border;

    @extend .checkbox-button;

    & + .label {
        margin-left: $checkbox-label-margin;
    }

    &::before,
    &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        background-color: var(--deprecated-medium-grey);
        transform: translate(-50%, -50%);
        content: '';
    }

    &::before {
        width: $facet-checkbox-line-width;
        height: $facet-checkbox-mark-size;
    }

    &::after {
        width: $facet-checkbox-mark-size;
        height: $facet-checkbox-line-width;
    }
}

.facet-search {
    margin: $facet-margin-y $facet-spacing;

    // @deprecated the prefix coveo is no longer used.
    .coveo-filter-container,
    .filter-container {
        width: 100%;

        input.filter-box {
            width: 100%;
        }
    }
}

.facet-search-results {
    position: absolute;
    top: $facet-search-results-top-position;
    left: $button-padding-x;
    z-index: $facet-search-results-z-index;
    width: calc(100% - #{$button-padding-x} * 2);
    max-height: $facet-more-height;
    margin: $facet-search-results-margin-y 0;
    padding: $dropdown-choices-top-bottom-margin 0;
    overflow: hidden auto;
    list-style: none;
    background-color: var(--white);
    border: 1px solid rgb(var(--deprecated-heather-rgb) / 30%);
    border-radius: $big-border-radius;

    @include slim-scroll(var(--deprecated-light-grey), var(--deprecated-medium-grey));
}

.facet-opened:last-child .facet-search-results {
    top: auto;
    bottom: $facet-search-results-bottom-position;
}