@import "shared/mixins-and-vars";

.search {
    @search-color: #4e7963;

    width: 100%;
    position: relative;
    display: flex;

    &__term {
        width: 100%;
        border: 3px solid @search-color;
        border-right-width: 0px;
        padding: 5px;
        height: (36 / @px);
        border-radius: 5px 0 0 5px;
        color: #000;
        position: relative;

        .enable__is-dark-mode & {
            border-right-width: 3px;
        }

        &:focus {
            z-index: 2;
            outline-offset: 2px;
        }
    }

    &__button {
        width: (40 / @px);
        height: (36 / @px);
        border: 1px solid @search-color;
        background: @search-color;
        text-align: center;
        color: #fff;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        margin: 0 !important;

        &:focus {
            outline-offset: 2px;
        }
    }

    &__icon {
        width: (20 / @px);
    }
}