@use 'theme/variables' as *;

.container-search {
    &.search-input-active {
        background: $ta-black-3 !important;
        transition: background 0.25s !important;

        .icon-container {
            background-color: unset !important;
            &:hover {
                svg-icon {
                    svg {
                        path {
                            fill: $bw2 !important;
                            transition: fill 100ms
                                cubic-bezier(0.46, 0.03, 0.51, 0.95) !important;
                        }
                    }
                }
            }

            &:active {
                svg-icon {
                    svg {
                        path {
                            fill: $bw5 !important;
                        }
                    }
                }
            }

            svg-icon {
                svg {
                    path {
                        fill: $bw4 !important;
                    }
                }
            }
        }
    }

    .multiple-search-input {
        caret-color: $white;
        width: 171px;
        height: 26px;
        transition:
            background 0.25s,
            width 0.25s;

        &.ca-full-width {
            width: 100%;
        }

        input {
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;
            padding: 0;
            margin-left: 2px;
            outline: none;

            &::selection {
                color: $white-2;
                background: $white-7;
            }
        }

        .btn-container {
            margin-right: 4px;
            padding-left: 5px;

            .confirm-icon,
            .clear-icon {
                line-height: 0;

                &:hover {
                    transform: scale(1.2);

                    svg {
                        transition: background-color 0.3s ease;
                        background-color: $white-2;
                        rect {
                            fill: $white-2;
                        }
                    }
                }

                &:active {
                    transform: scale(1);
                }

                svg {
                    rect {
                        transition: fill 0.3s ease;
                    }

                    path {
                        transition: fill 0.3s ease;
                        fill: $ta-black-3;
                    }
                }
            }

            .confirm-icon {
                margin-right: 4px;
            }
        }

        /* Chrome, Firefox, Opera, Safari 10.1+ */
        input::placeholder {
            color: $ta-light-grey-2;
        }
    }

    .inner-border {
        margin: auto 2px auto 0;
        width: 1px;
        height: 14px;
        background: $ta-light-grey-8;
    }
}

.chips {
    flex-direction: row-reverse;
    div {
        max-width: 100px;
        padding: 4px 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }

    .chip-green {
        background: $ta-green-2;
        &:hover {
            background: $special-filter-green;
            transition: background 0.25s;
        }
    }

    .chip-yellow {
        background: $ta-yellow-5;
        &:hover {
            background: $ta-yellow-2;
            transition: background 0.25s;
        }
    }

    .chip-purple {
        background: $special-filter-purple;
        &:hover {
            background: $special-filter-purple-1;
            transition: background 0.25s;
        }
    }
}

.icon {
    &-container {
        width: 26px;
        height: 26px;
        padding: 4px;

        &:hover:not(.not-focused) {
            background-color: $bw2;
            svg-icon {
                svg {
                    path {
                        fill: $ta-black;
                    }
                }
            }
        }

        &:active:not(.not-focused) {
            background-color: $bw-9;
            transition: background-color 200ms
                cubic-bezier(0.46, 0.03, 0.51, 0.95);
        }

        svg-icon {
            svg {
                rect,
                path {
                    stroke-width: none !important;
                    stroke: none !important;
                }
            }
        }

        &.icon-disabled {
            &:hover {
                background-color: unset;
            }
        }
    }

    &-close {
        &:hover {
            background-color: $white-6 !important;
        }
    }
}