src/components/search/style.scss
@import 'mo/style/common';

#{$search} {
    display: grid;
    font-size: 13px;
    grid-gap: 2px;
    grid-template-columns: 16px auto;
    margin: 6px 12px 0 2px;

    &__replace {
        // toggle button
        &__button {
            box-sizing: border-box;
            color: inherit;
            cursor: pointer;
            height: calc(100% - 3px);
            transition: background 0.3s;

            &.codicon {
                align-items: center;
                display: flex;
            }

            &:hover {
                background: var(--input-background);
            }
        }
    }

    input {
        background-color: var(--list-activeSelectionBackground);
        border-width: 0;
        color: inherit;
    }

    textarea {
        background: var(--input-background);
        border: 1px solid transparent;
        box-sizing: border-box;
        color: var(--input-foreground);
        font-family: inherit;
        font-size: inherit;
        height: 24px;
        line-height: 15px;
        min-height: 23px;
        outline: none;
        overflow: hidden;
        padding: 3px 62px 3px 4px;
        resize: none;
        width: 100%;

        &:focus {
            border-color: var(--focusBorder);
        }

        // TODO: better to mock a scoll bar
        // invisible scroll bar
        &::-webkit-scrollbar {
            opacity: 0;
        }
    }

    .scrollbar-invisible {
        position: absolute;
        right: 0;
    }

    &__toolbar {
        height: auto;
        position: absolute;
        right: 2px;
        top: 2px;

        #{$actionBar} {
            &__item {
                color: var(--activityBar-foreground);
                opacity: 0.7;
                transition: opacity 0.3s;

                &--checked {
                    background: var(--inputOption-activeBackground);
                    opacity: 1;
                }
            }
        }
    }

    &__input {
        position: relative;
    }

    &__group &__input + &__input {
        margin-top: 5px;
    }

    // validation styles
    &__base {
        padding: 5px;
        position: absolute;
        z-index: 1;

        &:not(textarea) {
            margin-top: -1px;
            width: calc(100% - 12px);
        }
    }

    & &__info {
        border: 1px solid var(--inputValidation-infoBorder);

        &:active,
        &:focus {
            border-color: var(--inputValidation-infoBorder);
        }

        &:not(textarea) {
            background: var(--inputValidation-infoBackground);
        }
    }

    & &__warning {
        border: 1px solid var(--inputValidation-warningBorder);

        &:active,
        &:focus {
            border-color: var(--inputValidation-warningBorder);
        }

        &:not(textarea) {
            background: var(--inputValidation-warningBackground);
        }
    }

    & &__error {
        border: 1px solid var(--inputValidation-errorBorder);

        &:active,
        &:focus {
            border-color: var(--inputValidation-errorBorder);
        }

        &:not(textarea) {
            background: var(--inputValidation-errorBackground);
        }
    }

    &__tree {
        margin-top: 5px;
    }

    &__treeNode--empty {
        margin: 6px 12px 0 18px;
    }

    &__treeNode--delete {
        text-decoration: line-through;
    }

    &__treeNode--match {
        background-color: var(--editor-findMatchHighlightBackground);

        &#{$search}__treeNode--delete {
            background-color: var(--diffEditor-removedTextBackground);
        }
    }

    &__treeNode--replace {
        background-color: var(--diffEditor-insertedTextBackground);
    }
}
