@mixin button-attr {
    display: inline-flex;
    font-size: 16px;
    font-weight: bold;
    border: none;
    text-decoration: none;
    color: white;
    background: linear-gradient(to right, #F15A4D, #EC7244);
    border-radius: 10px;
    border-top-left-radius: 0;
    align-items: center;
    &:hover {
        color: white;
        text-decoration: none;
    }

}
.goto-button {
    height: 40px;


    padding-left: 20px;
    padding-right: 36px;

    position: relative;

    @include button-attr;

    &:before {
        content: "";
        position: absolute;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAABHNCSVQICAgIfAhkiAAAAQFJREFUSEu91mERwjAMBeAXBeAAUAAWcIADQAFIAAUgAZQgARyABByEe7vC7XYrbdNA/mx36/pduySrwBiqugVwAHADsBYRXpMhyRE9A1R1DODeevQEMM9BvUDaWagJ5OyqegSw6WxAEjWDAT0BWJagVaAFrQZLURewBHUDc9EGVNUhgKmlJnveYfbOYokkrY7h5EWnYclMCPJm8GstzL8n+AAw+hO4Jsj93gHgd/SIWD6cRWTlnaXELj1J02BcjRsYMv0r5gbmYi5gCVYNlmJVoAWrBXmG6bbDTzbG6suUpaF2r51Jk5h5hWE72aHeLTELM4PhD8MOteDhSUT4h8iKF1xigQCC47hxAAAAAElFTkSuQmCC);
        background-repeat: no-repeat;
        width: 13px;
        height: 13px;
        top: calc(50% - 6px);
        right: 16px;
        background-size: contain;
    }
    &.icon-down:before {
        transform: rotate(90deg);
    }

    i {
        margin: 0 16px;
        color: white;
    }
    &.yellow {
        background-color: #DCBD56;
    }
    &.grey {
        background-color: #50647B;
    }
}
.goto-button[disabled] {
    background: #8291a1;
    cursor: not-allowed;
}

.simple-button {
    @include button-attr;
    padding: 0 20px;
    height: 50px;
}
@media (max-width: 767px){
    .goto-button {
        height: 32px;
        font-size: 13px;
    }
}

