:root {
    --button-lgram-color: #722ED1;
    --button-lgram-hover: #B37FEB;

    --button-risk-color: #FF4D4F;
    --button-risk-hover: #FE7875;

    --button-flat-border-color: #D1D1D1;

    --button-ghost-color: #E7E7E7;
    --button-ghost-border: #D1D1D1;
    --button-ghost-red: #FF4D4F;
    --button-ghost-red-hover: #FFF1F0;
    --button-ghost-yellow: #FAAD14;
    --button-ghost-yellow-hover: #FFFBE6;
    --button-ghost-green: #52C41A;
    --button-ghost-green-hover: #F6FFED;
    --button-ghost-blue: #1677FF;
    --button-ghost-blue-hover: #E6F4FF;

    --button-text-color: #1F1F1F;
}

.lme-button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: normal;
    transition: all 0.3s ease;
}
.lme-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    inline-size: max-content;
}
.lme-button-content svg {
    flex-shrink: 0;
}
.lme-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}
.lme-button.rounded {
    border-radius: 50%;
}

.lme-button.button-lg {
    height: 40px;
    border-radius: 8px;

    font-weight: 500;
    font-size: 16px;
    padding: 0 24px;
}

.lme-button.button-lg.rounded {
    border-radius: 50%;
}

.lme-button.button-lg.lme-button-icon {
    padding: 0;
    min-width: 40px;
}

.lme-button.button-md.lme-button-icon {
    padding: 0;
    min-width: 32px;
}

.lme-button.button-sm.lme-button-icon {
    padding: 0;
    min-width: 24px;
}

.lme-button.button-md {
    height: 32px;
    border-radius: 6px;

    font-weight: 500;
    font-size: 14px;
    padding: 0 22px;
}

.lme-button.button-md.rounded {
    border-radius: 50%;
}

.lme-button.button-sm {
    height: 24px;
    border-radius: 5px;

    font-weight: 500;
    font-size: 14px;
    padding: 0 12px;
}

.lme-button.button-sm.rounded {
    border-radius: 50%;
}


/* Primary */
.lme-button.primary {
    border: none;
    background-color: var(--button-default-color);
    color: #fff;
}
.lme-button.primary:hover {
    background-color: var(--button-default-hover);
}
.lme-button.primary:disabled {
    border: none;
    background-color: var(--button-default-color);
    color: #fff;
}


.lme-button.lgram.primary {
    border: none;
    background-color: var(--button-lgram-color);
    color: #fff;
}
.lme-button.lgram.primary:hover {
    background-color: var(--button-lgram-hover);
}
.lme-button.lgram.primary:disabled {
    border: none;
    background-color: var(--button-lgram-color);
    color: #fff;
}


.lme-button.risk.primary {
    border: none;
    background-color: var(--button-risk-color);
    color: #fff;
}
.lme-button.risk.primary:hover {
    background-color: var(--button-risk-hover);
}
.lme-button.risk.primary:disabled {
    border: none;
    background-color: var(--button-risk-color);
    color: #fff;
}


.lme-button.flat.primary {
    border: 1px solid var(--button-flat-border-color);
    background-color: #fff;
    color: var(--button-text-color);
}
.lme-button.flat.primary:hover {
    border-color: var(--button-default-color);
    color: var(--button-default-color);
}
.lme-button.flat.primary:disabled {
    border: 1px solid var(--button-flat-border-color);
    background-color: #fff;
    color: var(--button-text-color);
}



/* secondary */
.lme-button.secondary {
    border: 1px solid var(--button-default-color);
    background-color: #fff;
    color: var(--button-default-color);
}
.lme-button.secondary:hover {
    background-color: var(--button-default-color);
    color: #fff;
}
.lme-button.secondary:disabled {
    border: 1px solid var(--button-default-color);
    background-color: #fff;
    color: var(--button-default-color);
}


.lme-button.lgram.secondary {
    border: 1px solid var(--button-lgram-color);
    background-color: #fff;
    color: var(--button-lgram-color);
}
.lme-button.lgram.secondary:hover {
    background-color: var(--button-lgram-color);
    color: #fff;
}
.lme-button.lgram.secondary:disabled {
    border: 1px solid var(--button-lgram-color);
    background-color: #fff;
    color: var(--button-lgram-color);
}


.lme-button.risk.secondary {
    border: 1px solid var(--button-risk-color);
    background-color: #fff;
    color: var(--button-risk-color);
}
.lme-button.risk.secondary:hover {
    background-color: var(--button-risk-color);
    color: #fff;
}
.lme-button.risk.secondary:disabled {
    border: 1px solid var(--button-risk-color);
    background-color: #fff;
    color: var(--button-risk-color);
}



.lme-button.risk.flat {
    border: 1px solid var(--button-risk-color);
    background-color: #fff;
    color: var(--button-risk-color);
}
.lme-button.risk.flat:hover {
    background-color: var(--button-risk-color);
    color: #fff;
}
.lme-button.risk.flat:disabled {
    border: 1px solid var(--button-risk-color);
    background-color: #fff;
    color: var(--button-risk-color);
}






/* Dashed */
.lme-button.dashed {
    border: 1px dashed var(--button-default-color);
    background-color: #fff;
    color: var(--button-default-color);
}
.lme-button.dashed:hover {
    border-color: var(--button-default-hover);
    color: var(--button-default-hover);
}
.lme-button.dashed:disabled {
    border: 1px dashed var(--button-default-color);
    background-color: #fff;
    color: var(--button-default-color);
}


.lme-button.lgram.dashed {
    border: 1px dashed var(--button-lgram-color);
    background-color: #fff;
    color: var(--button-lgram-color);
}
.lme-button.lgram.dashed:hover {
    border-color: var(--button-lgram-hover);
    color: var(--button-lgram-hover);
}
.lme-button.lgram.dashed:disabled {
    border: 1px dashed var(--button-lgram-color);
    background-color: #fff;
    color: var(--button-lgram-color);
}


.lme-button.risk.dashed {
    border: 1px dashed var(--button-risk-color);
    background-color: #fff;
    color: var(--button-risk-color);
}
.lme-button.risk.dashed:hover {
    border-color: var(--button-risk-hover);
    color: var(--button-risk-hover);
}
.lme-button.risk.dashed:disabled {
    border: 1px dashed var(--button-risk-color);
    background-color: #fff;
    color: var(--button-risk-color);
}


.lme-button.flat.dashed {
    border: 1px dashed var(--button-flat-border-color);
    background-color: #fff;
    color: var(--button-text-color);
}
.lme-button.flat.dashed:hover {
    border-color: var(--button-default-hover);
    color: var(--button-default-hover);
}
.lme-button.flat.dashed:disabled {
    border: 1px dashed var(--button-flat-border-color);
    background-color: #fff;
    color: var(--button-text-color);
}



.lme-button.risk.flat {
    border: 1px solid var(--button-flat-border-color);
    background-color: #fff;
    color: var(--button-text-color);
}
.lme-button.risk.flat:hover {
    border-color: var(--button-risk-color);
    background-color: #fff;
    color: var(--button-risk-color);
}
.lme-button.risk.flat:disabled {
    border: 1px solid var(--button-flat-border-color);
    background-color: #fff;
    color: var(--button-text-color);
}


/*ghost*/
.lme-button.ghost.primary {
    border: 1px solid var(--button-ghost-border);
    background: none;
    color: var(--button-text-color);
}
.lme-button.ghost.primary:hover {
    border: 1px solid var(--button-ghost-color);
    background: var(--button-ghost-color);
    color: var(--button-text-color);
}
.lme-button.ghost.primary:disabled {
    border: 1px solid var(--button-ghost-border);
    background: none;
    color: var(--button-text-color);
}

.lme-button.ghost.secondary {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-text-color);
}
.lme-button.ghost.secondary:hover {
    border: 1px solid var(--button-ghost-color);
    background: var(--button-ghost-color);
    color: var(--button-text-color);
}
.lme-button.ghost.secondary:disabled {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-text-color);
}


.lme-button.ghost.dashed {
    border: 1px dashed var(--button-ghost-border);
    background: none;
    color: var(--button-text-color);
}
.lme-button.ghost.dashed:hover {
    border: 1px solid var(--button-ghost-color);
    background: var(--button-ghost-color);
    color: var(--button-text-color);
}
.lme-button.ghost.dashed:disabled {
    border: 1px dashed var(--button-ghost-border);
    background: none;
    color: var(--button-text-color);
}



.lme-button.ghost.red {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-ghost-red);
}
.lme-button.ghost.red:hover {
    background: var(--button-ghost-red-hover);
}
.lme-button.ghost.red:disabled {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-ghost-red);
}


.lme-button.ghost.yellow {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-ghost-yellow);
}
.lme-button.ghost.yellow:hover {
    background: var(--button-ghost-yellow-hover);
}
.lme-button.ghost.yellow:disabled {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-ghost-yellow);
}


.lme-button.ghost.green {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-ghost-green);
}
.lme-button.ghost.green:hover {
    background: var(--button-ghost-green-hover);
}
.lme-button.ghost.green:disabled {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-ghost-green);
}


.lme-button.ghost.blue {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-ghost-blue);
}
.lme-button.ghost.blue:hover {
    background: var(--button-ghost-blue-hover);
}
.lme-button.ghost.blue:disabled {
    border: 1px solid #00000000;
    background: none;
    color: var(--button-ghost-blue);
}