ui-button {
    /*Button Styles*/
    position: relative;
    display: inline-flex;
    border: none;
    margin: 0;
    text-decoration: none;
    background-color: var(--fermat-color-neutral450);
    text-align: center;
    gap: 6px;
    border-radius: 6px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: all;
    width: fit-content;
}

ui-button[disabled] {
    pointer-events: none;
}

ui-button.primary, ui-button > ui-text > p {
    color: var(--fermat-color-neutral150) !important;
}

ui-button.primary:hover {
    background-color: var(--fermat-color-neutral400);
}

ui-button.primary:active, ui-button.primary:focus, ui-button.primary.loading {
    background-color: var(--fermat-color-neutral350);
}

ui-button.primary[disabled], ui-button.primary[disabled] > ui-text > p {
    background-color: var(--fermat-color-neutral250);
    color: var(--fermat-color-neutral350) !important;
}
ui-button.primary.accent {
    background-color: var(--fermat-color-accent500);
}

ui-button.primary.accent:hover  {
    background-color: var(--fermat-color-accent400);
}

ui-button.primary.accent:active, ui-button.primary.accent:focus, ui-button.primary.accent.loading {
    background-color: var(--fermat-color-accent200);
}

ui-button.primary.accent[disabled], ui-button.primary.accent[disabled] > ui-text > p {
    background-color: var(--fermat-color-neutral250);
    color: var(--fermat-color-neutral350) !important;
}

ui-button.primary.danger {
    background-color: var(--fermat-color-error400);
}

ui-button.primary.danger:hover  {
    background-color: var(--fermat-color-error500);
}

ui-button.primary.danger:active, ui-button.primary.danger:focus, ui-button.primary.danger.loading {
    background-color: var(--fermat-color-error300);
}

ui-button.primary.danger[disabled], ui-button.primary.danger[disabled] > ui-text > p {
    background-color: var(--fermat-color-error200) !important;
    color: var(--fermat-color-error300) !important;
}

ui-button.secondary {
    background-color: transparent;
    border: 1px solid var(--fermat-color-neutral300);
}

ui-button.secondary > ui-text > p {
    color: var(--fermat-color-neutral500) !important;
}

ui-button.secondary:hover {
    background-color: var(--fermat-color-neutral250);
    border-color: var(--fermat-color-neutral300);
}

ui-button.secondary:active, ui-button.secondary:active > ui-text > p, ui-button.secondary:focus, ui-button.secondary:focus > ui-text > p, ui-button.secondary.loading {
    background-color: var(--fermat-color-neutral300);
    border-color: var(--fermat-color-neutral350);
    color: var(--fermat-color-neutral400) !important;

}

ui-button.secondary[disabled] {
    background-color: var(--fermat-color-neutral250);
    pointer-events: none;
    color: var(--fermat-color-neutral350) !important;
    border: 1px solid var(--fermat-color-neutral300)
}

ui-button.secondary[disabled] > ui-text > p {
    color: var(--fermat-color-neutral350) !important;
}

ui-button.secondary.accent > ui-text > p {
    color: var(--fermat-color-accent500) !important;
}

ui-button.secondary.accent:hover {
    background-color: var(--fermat-color-accent50);
    border-color: var(--fermat-color-neutral300);
}

ui-button.secondary.accent:active, ui-button.secondary.accent:active > ui-text > p, ui-button.secondary.accent:focus, ui-button.secondary.accent:focus > ui-text > p, ui-button.secondary.accent.loading {
    background-color: var(--fermat-color-accent100);
    border-color: var(--fermat-color-neutral350);

}

ui-button.secondary.accent[disabled] {
    background-color: transparent;
}

ui-button.secondary.accent[disabled] > ui-text > p {
    color: var(--fermat-color-accent200) !important;
}

ui-button.secondary.danger {
    background-color: transparent;
    color: var(--fermat-color-error400);
    border: 1px solid var(--fermat-color-error400);
}

ui-button.secondary.danger > ui-text > p {
    color: var(--fermat-color-error400) !important;
}

ui-button.secondary.danger:hover  {
    color: var(--fermat-color-error500) !important;
    border: 1px solid var(--fermat-color-error500);
    background-color: var(--fermat-color-error100);
}

ui-button.secondary.danger:active, ui-button.secondary.danger:active > ui-text > p, ui-button.secondary.danger:focus, ui-button.secondary.danger:focus > ui-text > p, ui-button.secondary.danger.loading {
    background-color: var(--fermat-color-error100);
    border-color: var(--fermat-color-error300);
    color: var(--fermat-color-error300) !important;

}

ui-button.secondary.danger[disabled] {
    background-color: var(--fermat-color-error200);
    pointer-events: none;
    color: var(--fermat-color-error300) !important;
    border-color: var(--fermat-color-error300);
}

ui-button.secondary[disabled] > ui-text > p {
    color: var(--fermat-color-neutral350) !important;
}

ui-button.ghost, ui-button.ghost > ui-text > p {
    background-color: transparent;
    color: var(--fermat-color-neutral500) !important;
}

ui-button.ghost:hover  {
    background-color: var(--fermat-color-neutral250);
}

ui-button.ghost:active, ui-button.ghost:active > ui-text > p, ui-button.ghost:focus, ui-button.ghost:focus > ui-text > p, ui-button.ghost.loading {
    background-color: var(--fermat-color-neutral300);
    color: var(--fermat-color-neutral400) !important;
}

ui-button.ghost[disabled], ui-button.ghost[disabled] > ui-text > p {
    pointer-events: none;
    color: var(--fermat-color-neutral350) !important;
}

ui-button.ghost.accent, ui-button.ghost.accent > ui-text > p {
    background-color: transparent;
    color: var(--fermat-color-accent500) !important;
}

ui-button.ghost.accent:hover  {
    background-color: var(--fermat-color-accent50);
}

ui-button.ghost.accent:active, ui-button.ghost.accent:active > ui-text > p, ui-button.ghost.accent:focus, ui-button.ghost.accent:focus > ui-text > p, ui-button.ghost.accent.loading {
    background-color: var(--fermat-color-accent100);
    color: var(--fermat-color-accent500) !important;
}

ui-button.ghost.accent[disabled], ui-button.ghost.accent[disabled] > ui-text > p {
    pointer-events: none;
    color: var(--fermat-color-accent200) !important;
}

ui-button.ghost.danger, ui-button.ghost.danger > ui-text > p {
    color: var(--fermat-color-error400) !important;
}

ui-button.ghost.danger:hover {
    background-color: var(--fermat-color-error100);
}

ui-button.ghost.danger:active, ui-button.ghost.danger:active > ui-text > p, ui-button.ghost.danger:focus, ui-button.ghost.danger:focus > ui-text > p, ui-button.ghost.danger.loading {
    background-color: var(--fermat-color-error100);
    color: var(--fermat-color-error300) !important;

}

ui-button.ghost.danger[disabled], ui-button.ghost.danger[disabled] > ui-text > p {
    color: var(--fermat-color-error300) !important;
}

ui-button.icon-position-right {
    direction: rtl;
}