::-webkit-scrollbar {
    background: transparent;
}


.tool-section {
    width: calc(100% - 16px);
    max-width: 1100px;
    margin: 80px auto;

    .modes::-webkit-scrollbar {
        display: none;
    }

    .modes {
        display: flex;
        align-items: center;
        position: relative;
        background-color: var(--color-white);
        width: 100%;
        border: 1px solid var(--color-gray-light);
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;

        .mode {
            transition: all 200ms;
            position: relative;
            padding: 8px 16px;
            border-bottom: 2px solid transparent;
            max-height: 40px;

            &:not(.active, :hover) {
                color: var(--text-light);
            }

            &:hover,
            &.active {
                cursor: pointer;
                color: var(--color-black);
            }

            &.active{
                border-bottom-color: var(--color-primary);
            }

            /* &:not(:last-child)::after {
                display: inline-block;
                content: '';
                width: 1px;
                height: 18px;
                background-color: var(--color-border);
                position: absolute;
                left: calc(100% + 16px);
                top: 50%;
                transform: translateY(-50%);
            } */
        }
    }

    @media (width <=768px) {
        .modes {
            max-width: 100%;
        }
    }

    .tool-container {
        border: 1px solid var(--color-gray-light);
        border-top: 0px !important;
        background-color: var(--color-white);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));

        #input,
        #output {
            padding: 16px 32px 16px 16px;
            font-weight: 400;
            font-size: 16px;
            line-height: 26px;
            color: var(--color-black);
            outline: none;
            border: none;
            height: 360px;
            overflow-y: auto;
            scroll-behavior: unset;

            &:empty::before {
                color: var(--placeholder-text);
                content: attr(placeholder);
                cursor: text;
            }

            .loading>& {
                opacity: 0.2;
            }

            span.new {
                color: var(--change-color);
            }
        }

        .output-section {
            position: relative;

            .loader {
                display: none;
            }

            &.loading .loader {
                display: flex;
                gap: 10px;
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                z-index: 9;
                border-radius: 8px;

                span {
                    color: var(--placeholder-text);
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 26px;
                }

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: var(--color-backdrop);
                    backdrop-filter: blur(4px);
                    -webkit-backdrop-filter: blur(4px);
                    z-index: -1;
                    border-radius: inherit;
                    display: inherit;
                }
            }
        }

        .input-section {
            position: relative;

            @media (width > 768px) {
                border-right: 1px solid var(--color-border);
            }

            .reset-tool {
                position: absolute;
                top: 6px;
                right: 6px;
                outline: none;
                border: none;
                background-color: transparent;
                transition: all 200ms;
                border-radius: 6px;

                img {
                    filter: var(--filter-white);
                }

                &:hover {
                    cursor: pointer;
                    background-color: var(--hover-doc);

                    img {
                        filter: var(--filter-icon);
                    }
                }
            }
        }

        .action-buttons {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            position: relative;

            .word-count {
                font-size: 14px;
                line-height: 18px;
                color: var(--text-color);
            }

            .main-button {
                border-radius: 6px;
                padding: 8px 12px;
                background-color: var(--color-primary);
                cursor: pointer;
                border: none;
                outline: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                min-width: 114px;
                min-height: 36px;

                span {
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 20px;
                    color: #ffffff;
                    font-family: "Open Sans", sans-serif
                }

                &:hover {
                    cursor: pointer;
                    background-color: var(--color-primary-hover);
                }
            }

            .action-btns {
                display: flex;
                gap: 8px;
                align-items: center;

                button {
                    background-color: transparent;
                    border: none;
                    outline: none;
                    padding: 6px;
                    transition: all 200ms ease-in-out;
                    border-radius: 6px;
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;

                    img {
                        filter: var(--filter-icon);
                    }

                    &:hover {
                        cursor: pointer;
                        background-color: var(--color-light-bg);
                    }

                    .dark &:hover {
                        cursor: pointer;
                        background-color: var(--color-gray-light);

                        img {
                            filter: var(--filter-white);
                        }
                    }

                    &.upload-file {
                        padding: 8px;
                        border-radius: 6px;
                        transition: all ease-in 200ms;
                        font-family: "Open Sans", sans-serif;
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 20px;
                        color: var(--text-color);

                        img {
                            filter: var(--filter-white);
                        }

                        &:hover {
                            background-color: var(--hover-doc);
                            color: var(--hover-text);

                            img {
                                filter: var(--filter-icon);
                            }
                        }
                    }
                }
            }

            @media (width <=768px) {
                .input-section>& {
                    border-bottom: 1px solid var(--color-border);
                }
            }
        }
    }

    .quick-actions {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        top: 60px;
        left: 16px;

        @media (max-width:1024px) {
            top: calc(50% - 15px);
            left: 50%;
            transform: translate(-50%, -50%);
            justify-content: center;
        }

        button {
            display: inline-flex;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            gap: 8px;
            align-items: center;
            border: 1px solid var(--color-border);
            padding: 6px 10px;
            background-color: transparent;
            color: var(--text-color);
            border-radius: 6px;
            transition: all 200ms;

            img {
                filter: var(--filter-white);
            }

            &:hover {
                cursor: pointer;
            }
        }
    }

    .captcha-div {
        position: absolute;
        bottom: calc(100% - 8px);
        right: 16px;
    }

    @media (width <=768px) {
        margin: 40px auto;
    }
}

.content-section {
    width: 100%;
    background-color: var(--color-white);
}

.js-submit-btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.d-lg-flex {
    display: flex;

    @media (min-width:768px) {
        display: none !important;
    }
}

.js-lg-icon {
    display: flex;

    @media (max-width: 768px) {
        display: none !important;
    }
}

.d-lg-block {
    display: block;

    @media (max-width:768px) {
        display: none !important;
    }
}

.spinner {
    margin: 0 auto;
    border-top-color: #ffffff;
}

[data-tooltip]:not(.inverse-tooltip) {

    &::before,
    &.initial::before {
        min-width: unset !important;
        max-width: fit-content !important;
        width: fit-content !important;
        color: #ffff !important;
    }
}

@media only screen and (max-width: 550px) {
    [data-tooltip]::before,
    [data-tooltip]::after {
        display: inline-flex !important;
    }
}

.sample-text,
.paste-text{
    max-height: 32px;
    transition: all ease-in 200ms;

    &:hover{
        background: var(--color-gray-light) !important;
        color: var(--hover-text);
    }
}