1.css

.ActionBar {
    display: flex;

    flex-direction: row;
    align-items: center;

    position: relative;

    width: 100%;
    height: 56px;

    background: #2e3e49;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.04);

    &-Title {
        font-size: 20px;
        font-weight: 500;
        color: #fff;
        font-family: Roboto;
    }

    &-Item {
        margin: 0 16px;
    }

    &-Button {
        width: 24px;
        height: 24px;

        border: 0;
        background: transparent;
        background-size: cover;

        cursor: pointer;
    }

    &-BackButton {
        background-image: url('/ui/images/icons/arrow-back.svg');
    }

    &-SearchButton {
        position: absolute;
        right: 0;

        background-image: url('/ui/images/icons/search.svg');
    }

    &-SearchForm {
        display: flex;
        align-items: center;

        width: 100%;
        height: 40px;

        background: #fff;

        margin: 0 8px;

        border-radius: 2px;

        &::before {
            content: '';

            width: 24px;
            height: 24px;

            margin: 0 8px;

            opacity: .5;

            background: url('/ui/images/icons/search_darker.svg');
        }
    }

    &-SearchField {
        width: 100%;
        height: 100%;

        font-size: 20px;

        border: 0;
        outline: 0;
        background: transparent;
    }
}