/*---------------------------
	Popular Search Keywords
---------------------------*/

$rtl: 0 !default;
$dir: ltr !default;

@import "../theme/theme-imports";

// Search Lists
.search-lists {
    position: absolute;
    margin-top: 3px;
    padding: 1.25rem;
    left: 0;
    right: 0;
    top: -9999px;
    box-shadow: 0 2px 35px rgba(0, 0, 0, 0.1);
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: 0;
    background: var(--porto-light-1);
    z-index: 1050;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;

    &.show {
        top: 100%;
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0;
        padding: 0;
        list-style: none;
        stroke: var(--porto-body-color);

        a {
            display: block;
            padding: 8px 12px;
            border-radius: 3px;
            background-color: var(--porto-gray-1);
            color: var(--porto-body-color);
            text-transform: uppercase;
            font-weight: 600;
            font-size: 10px;
            line-height: 1;
            transition: color .3s, background-color .3s;

            &:hover {
                color: var(--porto-light-1);
                background-color: var(--porto-heading-color);
            }
        }
    }

    li {
        position: relative;
    }
}

.search-list>.title {
    margin-bottom: 13px;
    display: block;
    text-transform: capitalize;
    line-height: 1;
    text-align: start;
}

.search-list:not(.empty)+.search-list {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--porto-gray-2);
}


// Search History
.sh-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 13px;
    line-height: 1;

    .title {
        margin: 0;
    }
}

.search-history-list ul a {
    padding-#{$right}: 30px;

    &:hover+.sh-clear {
        color: var(--porto-light-1);
        stroke: var(--porto-light-1);
    }
}

.sh-clear {
    cursor: pointer;
    opacity: .7;
    transition: opacity .3s, color .3s, transform .3s;

    &:hover {
        opacity: 1;
    }

    li & {
        position: absolute;
        #{$right}: 0;
        top: 0;
        bottom: 0;
        padding: 0 7px;

        &:hover {
            transform: rotateZ(90deg);
        }
    }
}