.common-ui-search-field(@color-blue, @bg-image) {
    .search-field {
        max-width: 500px;
        position: relative;
        margin: 40px auto;
        input {
            position: relative;
            z-index: 2;
            border: 1px solid @color-blue;
            border-radius: 4px;
            line-height: 15px;
            font-size: 15px;
            padding: 8px 30px 8px 10px;
            width: 100%;
            max-height: 35px;
            height: 35px;
            padding-right: 45px;
            box-sizing: border-box;
            outline: none;
            &:focus {
                box-shadow: @color-blue 0 0 2px;
            }
        }
        button {
            position: absolute;
            z-index: 3;
            background-position: center;
            background-repeat: no-repeat;
            background-color: transparent;
            background-image: @bg-image;
            border: 0;
            width: 18px;
            height: 18px;
            top: 8px;
            right: 10px;
            cursor: pointer;
            &:hover {
                transform: scale(1.05);
                transition: transform 500ms;
            }
            &:focus {
                outline: 0;
            }
        }
        .dropdown {
            list-style: none;
            position: absolute;
            margin: -10px 0 0 0;
            width: 100%;
            padding: 8px 0 0 0;
            border: 1px solid @color-blue;
            border-radius: 4px;
            background-color: white;
            box-sizing: border-box;
            li {
                padding: 8px 10px;
                cursor: pointer;
                text-align: left;
                &:hover {
                    background-color: @color-blue;
                    color: white;
                }
            }
        }
        .error {
            font-size: 12px;
            text-align: left;
            color: @color-blue;
            position: absolute;
            margin-top: 1px;
        }
    }
}

.common-ui-slides(@dur: 200ms; @off: 100%) {
    .slides-switch {
        > .slide-enter-active,
        > .slide-exit-active {
            transition: transform @dur;
        }
        &.slide-backward > .slide-enter {
            transform: translate(-@off);
            transition-delay: 100ms;
        }
        &.slide-forward > .slide-enter {
            transform: translate(@off);
            transition-delay: 100ms;
        }
        &.slide-forward > .slide-exit,
        &.slide-backward > .slide-exit,
        &.slide-forward > .slide-enter-active,
        &.slide-backward > .slide-enter-active {
            transform: translate(0);
        }
        &.slide-forward > .slide-exit-active {
            transform: translate(-@off);
        }
        &.slide-backward > .slide-exit-active {
            transform: translate(@off);
        }
        &.pre-mount > :not(.slide-appear):not(.slide-enter):not(.slide-exit):not(.slide-enter-done):not(.slide-enter-active):not(.slide-exit-active) {
            display: none;
        }
    }
}

.scale-jump-on-hover(@scale: 1.1) {
    transition: transform 0.5s cubic-bezier(0.2, 3, 0.4, 1) 0s;
    &:hover {
        transform: scale(@scale);
    }
}

.common-ui-menu-icon() {
    .menu-icon {
        position: relative;
        overflow: hidden;
        width: 20px;
        height: 20px;
        svg {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        @keyframes roll_up {
            0% { transform: translateY(0px); }
            40% { transform: translateY(-26px); }
            41% { opacity: 0; }
            42% { transform: translateY(26px); }
            43% { opacity: 1; }
            85%, 100% { transform: translateY(0px); }
        }
        &.menu-icon-profile {
            @keyframes profile_1 { 80%, 100% { transform: translateY(3px); }}
            @keyframes profile_2 { 80%, 100% { transform: translateY(-3px); }}
            svg:first-child {
                bottom: 10px;
                left: 7px;
                width: 9px;
                height: 9px;
            }
            svg:last-child {
                bottom: 1px;
                left: 5px;
                width: 14px;
                height: 8px;
            }
            *:hover > & {
                svg:first-child { animation: profile_1 alternate 400ms 2;  }
                svg:last-child { animation: profile_2 alternate 400ms 2;  }
            }
        }
        &.menu-icon-logout {
            width: 19px;
            height: 19px;
        }
        &.menu-icon-plus {
            @keyframes plus_2 { 80%, 100% { transform: translateY(-24px); } }
            svg:first-child {
                bottom: 1px;
                left: 3px;
                width: 14px;
                height: 18px;
            }
            svg:last-child {
                bottom: -100%;
                left: 5px;
                width: 9px;
                height: 7px;
            }
            *:hover > & {
                svg:last-child { animation: plus_2 alternate 400ms 2;  }
            }
        }
        &.menu-icon-settings {
            @keyframes settings_2 { 80%, 100% { transform: rotate(145deg); } }
            svg:first-child {
                bottom: 0;
                left: 0;
                width: 20px;
                height: 20px;
            }
            svg:last-child { display: none; }
            *:hover > & {
                svg:first-child { animation: settings_2 alternate 400ms 2;  }
            }
        }
        &.menu-icon-dns {
            @keyframes dns_1 { 80%, 100% { transform: rotate(45deg); } }
            svg:first-child {
                bottom: 0;
                left: 0;
                width: 20px;
                height: 20px;
            }
            svg:last-child { display: none; }
            *:hover > & {
                svg:first-child { animation: dns_1 alternate 400ms 2;  }
            }
        }
        &.menu-icon-support {
            svg:first-child {
                bottom: 1px;
                left: 1px;
                width: 18px;
                height: 18px;
            }
            svg:last-child {
                bottom: 5px;
                left: 6px;
                width: 8px;
                height: 10px;
            }
            *:hover > & {
                svg:last-child { animation: roll_up alternate 500ms 2; }
            }
        }
        &.menu-icon-legal {
            @keyframes legal_1 {
                80%, 100% { transform: translate(-4px, -9px) rotate(60deg); }
            }
            svg:first-child {
                bottom: 2px;
                left: 2px;
                width: 14px;
                height: 18px;
                transform-origin: 0 100%;
            }
            svg:last-child {
                bottom: 0;
                left: 7px;
                width: 10px;
                height: 6px;
            }
            *:hover > & {
                svg:first-child { animation: legal_1 alternate 400ms 2; }
            }
        }
        &.menu-icon-redeem {
            @keyframes redeem_2 { 80%, 100% { transform: rotate(-15deg); } }
            svg:first-child {
                bottom: 1px;
                left: 1px;
                width: 16px;
                height: 11px;
            }
            svg:last-child {
                bottom: 11px;
                left: 1px;
                width: 16px;
                height: 8px;
                transform-origin: 0 100%;
            }
            *:hover > & {
                svg:last-child { animation: redeem_2 alternate 400ms 2; }
            }
        }
        &.menu-icon-add {
            @keyframes add_2 { 80%, 100% { transform: rotate(90deg); } }
            svg:first-child {
                bottom: 0;
                left: 0;
                width: 20px;
                height: 20px;
            }
            svg:last-child { display: none; }
            *:hover > & {
                svg:first-child { animation: add_2 alternate 400ms 2;  }
            }
        }
        &.menu-icon-language {
            @keyframes language_2 {
                80%, 100% { transform: translateY(-3px); }
            }
            svg:first-child {
                bottom: 3px;
                left: 3px;
                width: 14px;
                height: 10px;
            }
            svg:last-child {
                bottom: 12px;
                left: 3px;
                width: 13px;
                height: 5px;
                transform-origin: 0 100%;
            }
            *:hover > & {
                svg:last-child { animation: language_2 alternate 400ms 2; }
            }
        }
        &.menu-icon-alert {
            *:hover > & {
                svg:last-child { animation: roll_up alternate 500ms 2; }
            }
        }
        &.menu-icon-about {
            *:hover > & {
                svg:last-child { animation: roll_up alternate 500ms 2; }
            }
        }
        &.menu-icon-incognito {
            @keyframes incognito_2 { 80%, 100% { transform: rotate(7deg); } }
            svg:last-child {
                transform-origin: 100% 50%;
            }
            *:hover > & {
                svg:last-child { animation: incognito_2 alternate 400ms 2; }
            }
        }
        &.menu-icon-hide_ip {
            @keyframes hide_ip_2 {
                80%, 100% { transform: scale(0.65); }
            }
            *:hover > & {
                svg:last-child { animation: hide_ip_2 alternate 400ms 2; }
            }
        }
        &.menu-icon-protect {
            @keyframes protect_2 {
                80%, 100% { transform: translate(3px, -1px) scaleY(0.7); }
            }
            *:hover > & {
                svg:last-child { animation: protect_2 alternate 400ms 2; }
            }
        }
        &.menu-icon-devices {
            @keyframes devices_2 {
                80%, 100% { transform: translateY(-8px); }
            }
            *:hover > & {
                svg:last-child { animation: devices_2 alternate 400ms 2; }
            }
        }
    }
}