@import '@/scss/variables';
@import '@/scss/mixins';

.b-search-static {
    margin-bottom: 10px;
}

.b-search-static  .search-static__wrapper {
    display: flex;
    width: 100%;
    column-gap: 1px;
}

.b-search-static  .search-static__input {
    flex: 1;
    display: flex;
    position: relative;

    input {
        all: unset;
        position: relative;
        width: 100%;
        display: block;
        font-weight: 400;
        font-size: 16px;
        box-sizing: border-box;
        line-height: 1;
        padding: 8px 20px 8px 45px;
        background-color: #fff;
        color: #000;
        border-right: none;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        flex: 1;
    }
}

.b-search-static .search-static__input-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    left: 8px;
}

.b-search-static  .search-static__button {
    width: 68px;
    height: 40px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

    button {
        all: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        width: 100%;
        height: 100%;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background-color: #fff;
        color: #30549A;
        transition-duration: .2s;
    
        &:hover {
            background-color: #08aff3;
            color: #fff;
        }
    }
}