.f-button {
    line-height: 1.5715;
    position: relative;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: 1px solid transparent;
    box-shadow: 0 2px #00000004;
    cursor: pointer;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    height: var(--f-button-height);
    padding: 4px 15px;
    font-size: 16px;
    border-radius: var(--f-border-radius);
    color: #000000d9;
    background: #fff;
    border-color: #d9d9d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.f-button[disabled] {
    cursor: not-allowed;
}

.f-button.f-button-primary {
    color: #fff;
    background: var(--f-primary-color);
    border-color: var(--f-primary-color);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px rgba(0, 0, 0, 0.04);
}

.f-button.f-button-primary.f-btn-gradient {
    color: #fff;
    background: var(--f-gradient-bg);
    border: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px rgba(0, 0, 0, 0.04);
}

.f-button.f-button-primary.f-button-outline {
    color: var(--f-primary-color);
    background: var(--f-light-color);
    border-color: var(--f-primary-color);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px rgba(0, 0, 0, 0.04);
}

.f-button.f-button-primary:hover {
    color: #fff;
    background: var(--f-gradient-bg-reverse);
    border-color: var(--f-primary-color);
}

.f-button.f-button-primary.f-btn-gradient:hover {
    /*color: #fff;*/
    /*background: var(--f-gradient-bg-reverse);*/
}

.f-button .f-button-right-icon {
    position: absolute;
    right: 4px;
    top: 47%;
    transform: translateY(-53%);
    font-size: 40px;
    pointer-events: none;
    opacity: .9;
}

.f-button .f-button-content {
    pointer-events: none;
    display: flex;
    align-items: center;
}

.f-button .svg-icon {
    display: flex;
    align-items: center;
}

.f-button.f-button-primary .svg-icon svg rect,.f-button.f-button-primary .svg-icon svg path {
    fill: var(--f-light-color);
}

.f-button.f-button-primary.f-button-outline .svg-icon svg rect, .f-button.f-button-primary.f-button-outline .svg-icon svg path {
    fill: var(--f-primary-color);
}

.f-button.f-button-primary.f-button-outline:hover .svg-icon svg rect, .f-button.f-button-primary.f-button-outline:hover .svg-icon svg path {
    fill: var(--f-light-color);
}

.f-button.f-button-active {
    background: var(--f-gradient-bg);
}