@import 'scss/styles.scss';

.comments-container {
    .divider {
        height: 12px;
    }

    .search {
        .cancel-search {
            visibility: hidden;
            pointer-events: none;
        }
        input {
            border: 0;
            -webkit-transition: 0.35s;
            transition: 0.35s;
            outline: none;

            &:focus {
                border: 0;
            }
            background-color: transparent;
            &::placeholder {
                color: $ta-light-grey-2;
            }
        }
        &:focus-within {
            background-color: $ta-black-3 !important;

            .cancel-search {
                visibility: visible;
                pointer-events: auto;
                background-color: $grey !important;
            }
        }

        &:has(input:valid) {
            background-color: $ta-blue-15 !important;

            .cancel-search {
                visibility: visible;
                pointer-events: auto;
                background-color: $ta-blue-4 !important;

                svg path,
                svg circle {
                    fill: $ta-blue-15 !important;
                }
            }

            input {
                color: $white !important;
            }

            &:not(:focus-within) {
                input {
                    color: $black-2 !important;
                }

                background-color: $ta-blue-16 !important;

                &:hover {
                    background-color: $ta-blue-17 !important;
                }
            }
        }

        &-dark {
            background-color: $ta-black;

            &:focus-within {
                background-color: $bw-9 !important;
            }

            &:has(input:valid) {
                color: $ta-blue-16 !important;
                background-color: $ta-blue-15 !important;

                &:not(:focus-within) {
                    input {
                        color: $white !important;
                    }

                    background-color: $ta-blue-20 !important;

                    &:hover {
                        background-color: $ta-blue-21 !important;
                    }
                }
            }
        }
    }

    .comments-wrapper {
        overflow-y: scroll;

        .comment {
            word-break: break-word;

            .action-icon {
                display: none;
            }

            &:hover {
                .action-icon {
                    display: flex;
                }
            }
        }
    }

    .comment-content {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    textarea {
        border: none;
        overflow: auto;
        outline: none;
        field-sizing: content;
        box-shadow: none;
        resize: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
}

.icon-hover:hover {
    transition: all 0.3s ease-in-out;
    height: 22px !important;
    width: 22px !important;
}