.mud-button {
    border-radius: calc(var(--radius) * 3) !important;
    text-transform: none;
    padding-inline: calc(var(--spacing) * 4);
    outline-style: none !important;
}

    /* disable event hightlight */
    .mud-button:disabled {
        opacity: var(--disabled-opacity);
        cursor: var(--cursor-disabled);
        pointer-events: none;
        background-color:inherit !important;
    }

    .mud-button:focus-visible:not(:focus) {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
        --tw-ring-color: var(--focus);
        --tw-ring-offset-width: var(--ring-offset-width);
        --tw-ring-offset-shadow: var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);
        --tw-ring-offset-color: var(--background);
        --tw-outline-style: none;
        outline-style: none;
    }

/* focus event hightlight */
.mud-button-filled:focus-visible, .mud-button-text:focus-visible, .mud-button-outlined:focus-visible, .mud-icon-button:focus-visible span svg {
    --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-ring-color: var(--focus);
    --tw-ring-offset-width: var(--ring-offset-width);
    --tw-ring-offset-shadow: var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--background);
    --tw-outline-style: none;
    outline-style: none;
    border-radius: calc(var(--radius) * 3) !important;
}

/* primary button (hero ui primary) */
.mud-button-filled.mud-button-filled-primary, .mud-button-root[class*='primary']:disabled {
    background-color: var(--accent) !important;
    color: var(--accent-foreground) !important;
}

@media (hover: hover) {
    .mud-button-filled.mud-button-filled-primary:hover {
        background-color: var(--color-accent) !important;
    }

    @supports (color: color-mix(in lab,red,red)) {
        .mud-button-filled.mud-button-filled-primary:hover {
            background-color: color-mix(in oklab,var(--color-accent)90%,var(--color-accent-foreground)10%) !important;
        }
    }
}

.mud-button-text.mud-button-text-primary {
    color: var(--accent);
}

/* secondary button (hero ui secondary) */
.mud-button-filled.mud-button-filled-secondary, .mud-button-root[class*='secondary']:disabled {
    background-color: var(--default) !important;
    color: var(--accent) !important;
}

@media (hover: hover) {
    .mud-button-filled.mud-button-filled-secondary:hover {
        background-color: var(--color-default) !important;
    }

    @supports (color: color-mix(in lab,red,red)) {
        .mud-button-filled.mud-button-filled-secondary:hover {
            background-color: color-mix(in oklab,var(--color-default)80%,transparent) !important;
        }
    }
}

/* default button (hero ui tertiary) */
.mud-button-filled.mud-button-filled-tertiary, .mud-button-root[class*='tertiary']:disabled {
    background-color: var(--default) !important;
    color: var(--tw-prose-body) !important;
    --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 90%, transparent);
}

@media (hover: hover) {
    .mud-button-filled.mud-button-filled-tertiary:hover {
        background-color: var(--color-default) !important;
    }

    @supports (color: color-mix(in lab,red,red)) {
        .mud-button-filled.mud-button-filled-tertiary:hover {
            background-color: color-mix(in oklab,var(--color-default)80%,transparent) !important;
        }
    }
}

/* error button (hero ui danger) */
.mud-button-filled.mud-button-filled-error, .mud-button-filled-error:disabled {
    background-color: var(--danger) !important;
    color: var(--danger-foreground) !important;
}

@media (hover: hover) {
    .mud-button-filled.mud-button-filled-error:hover{
        background-color: var(--color-danger)
    }

    @supports (color: color-mix(in lab,red,red)) {
        .mud-button-filled.mud-button-filled-error:hover {
            background-color: color-mix(in oklab,var(--color-danger)90%,var(--color-danger-foreground)10%)
        }
    }
}

/* warning button (hero ui warning) */
.mud-button-filled.mud-button-filled-warning {
    background-color: var(--warning);
    color: var(--warning-foreground)
}

@media (hover: hover) {
    .mud-button-filled.mud-button-filled-warning:hover {
        background-color: var(--color-warning)
    }

    @supports (color: color-mix(in lab,red,red)) {
        .mud-button-filled.mud-button-filled-warning:hover {
            background-color: color-mix(in oklab,var(--color-warning)90%,var(--color-warning-foreground)10%)
        }
    }
}

.mud-button-filled-success:disabled {
    background-color: var(--color-success) !important;
    color: var(--color-success-foreground) !important;
}

/* small button (hero ui small) */
.mud-button-filled-size-small {
    height: calc(var(--spacing)*9);
    padding-inline: calc(var(--spacing)*3);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    font-size: var(--text-sm);
}

@media (min-width: 48rem) {
    .mud-button-filled-size-small {
        height: calc(var(--spacing)*8)
    }
}

/* medium button (hero ui default) */
.mud-button-filled-size-medium {
    height: calc(var(--spacing)*10);
    padding-inline: calc(var(--spacing)*4);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

@media (min-width: 48rem) {
    .mud-button-filled-size-medium {
        height: calc(var(--spacing)*9)
    }
}

/* large button (hero ui large) */
.mud-button-filled-size-large {
    height: calc(var(--spacing)*11);
    font-size: var(--text-base);
    line-height: var(--tw-leading,var(--text-base--line-height));
}

@media (min-width: 48rem) {
    .mud-button-filled-size-large {
        height: calc(var(--spacing)*10)
    }
}

/* text button */
.mud-button-text {
    color: var(--default-foreground);
    background-color: #0000
}

@media (hover: hover) {
    .mud-button-text:hover {
        background-color: var(--color-default)
    }

    @supports (color: color-mix(in lab,red,red)) {
        .mud-button-text:hover {
            background-color: color-mix(in oklab,var(--color-default)80%,transparent)
        }
    }
}

/* add scale effect on click */
.mud-button:active {
    transform: scale(.97);
}

/* remove ripple effect on click */
.mud-ripple:after {
    content: "";
    display: none !important;
}