<script lang="ts">
  import { SidebarExpand24, ChevronDown24, ChevronUp24 } from '@mozaic-ds/icons-svelte';
  import Divider from '../divider/Divider.svelte';
  import IconButton from '../iconbutton/IconButton.svelte';
  import SidebarFooterMenu from './_SidebarFooterMenu.svelte';
  import { useFloatingItem } from '../sidebar/floating-item.svelte';
  import { getSidebarState, setSubItems } from '../sidebar/sidebar-state.svelte';
  import { MediaQuery } from 'svelte/reactivity';

  /**
   * SidebarFooter is a component that renders the footer of a sidebar. It can display a user profile with an optional avatar, title, subtitle, and link, and includes a button to expand or collapse the sidebar.
   * @slot - default - Contains one or more SidebarNavItem components used to render the profile items.
   * @event toggle {CustomEvent<boolean>} - Emits when the toggle button is clicked.
   * @event logout {CustomEvent} - Emits when the log out button in the footer menu is clicked.
   */

  interface Props {
    [key: string]: any;
    /**
     * The main text or name displayed in the sidebar footer profile.
     */
    title?: string;
    /**
     * Secondary text or description displayed under the title in the footer.
     */
    subtitle?: string;
    /**
     * URL of the avatar image displayed in the footer profile.
     */
    avatar?: string;
    /**
     * if `true`, hides the sidebar expand/collapse button.
     */
    expandable?: boolean;
    /**
     * Text to display for the log out button.
     */
    logOutLabel?: string;
    /**
     * Callback to trigger when the user clicks the log out button in the footer menu.
     */
    onlogout?: () => void;
  }

  let {
    title,
    subtitle,
    avatar,
    expandable = true,
    logOutLabel = 'Log out',
    onlogout,
    class: className,
    ...attrs
  }: Props = $props();

  let element: HTMLElement;

  let expanded = $state(false);

  let desktopTrigger: HTMLElement | null = $state(null);
  let mobileTrigger: HTMLElement | null = $state(null);
  let listbox: HTMLElement | null = $state(null);

  const isMobile = $derived(new MediaQuery('(max-width: 780px)').current);

  const {
    floatingItemIsDisplayed,
    hideFloatingItem,
    showFloatingItem,
    onTriggerKeydown,
    onListboxKeydown,
  } = useFloatingItem(
    () => (isMobile ? mobileTrigger : desktopTrigger),
    () => listbox,
    { position: 'top' },
  );

  function toggleSidebar() {
    element.dispatchEvent(new CustomEvent('toggle', { bubbles: true, composed: true }));
  }

  const MenuIcon = $derived(floatingItemIsDisplayed ? ChevronUp24 : ChevronDown24);

  const desktopTriggerAttrs = $derived.by(() => {
    if (isMobile) return {};

    const baseAttrs = {
      id: 'trigger-footer',
      ['aria-expanded']: floatingItemIsDisplayed,
      ['aria-haspopup']: 'listbox',
      ['aria-controls']: 'listbox-footer',
    };

    return expanded
      ? {
          ...baseAttrs,
          ['aria-expanded']: floatingItemIsDisplayed,
          onclick: showFloatingItem,
        }
      : {
          ...baseAttrs,
          ['aria-expanded']: floatingItemIsDisplayed,
          onmouseenter: showFloatingItem,
          onfocus: showFloatingItem,
          onkeydown: onTriggerKeydown,
          onmouseleave: hideFloatingItem,
          onblur: hideFloatingItem,
        };
  });

  function handleLogOut() {
    onlogout?.();
    element.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
  }
</script>

<footer
  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
  {@attach setSubItems('M-SIDEBAR-FOOTER')}
  bind:this={element}
  class={[
    'mc-sidebar__footer',
    expanded ? 'mc-sidebar__footer--expanded' : 'mc-sidebar__footer--collapsed',
    className,
  ]}
  {...attrs}
>
  <Divider />
  <div class="mc-sidebar__footer-container">
    {#if avatar || title || subtitle}
      <svelte:element
        this={isMobile ? 'div' : 'button'}
        bind:this={desktopTrigger}
        class="mc-sidebar__footer-profile mc-sidebar__footer-trigger"
        {...desktopTriggerAttrs}
      >
        {#if avatar}
          <img class="mc-sidebar__footer-avatar" src={avatar} alt={title} loading="lazy" />
        {/if}

        {#if title || subtitle}
          <div class="mc-sidebar__footer-content">
            {#if title}
              <p class="mc-sidebar__footer-title">
                {title}
              </p>
            {/if}

            {#if subtitle}
              <p class="mc-sidebar__footer-subtitle">
                {subtitle}
              </p>
            {/if}
          </div>
        {/if}

        {#if !isMobile}
          <SidebarFooterMenu
            bind:listbox
            {logOutLabel}
            {expanded}
            {onListboxKeydown}
            {hideFloatingItem}
            onlogout={handleLogOut}
          >
            <slot />
          </SidebarFooterMenu>
        {/if}
      </svelte:element>
    {/if}

    {#if expandable}
      <span class="mc-sidebar__footer-expand">
        <IconButton
          ghost
          aria-label="Expand"
          aria-expanded={expanded}
          onclick={() => toggleSidebar()}
        >
          <SidebarExpand24 slot="icon" />
        </IconButton>
      </span>
    {/if}

    {#if isMobile}
      <button
        bind:this={mobileTrigger}
        class="mc-button mc-button--icon-button mc-button--ghost mc-sidebar__footer-expand--mobile"
        aria-label="Profile menu"
        aria-expanded={floatingItemIsDisplayed}
        onclick={() => showFloatingItem()}
      >
        <MenuIcon />

        <SidebarFooterMenu
          bind:listbox
          {logOutLabel}
          {expanded}
          {onListboxKeydown}
          {hideFloatingItem}
          onlogout={handleLogOut}
        >
          <slot />
        </SidebarFooterMenu>
      </button>
    {/if}
  </div>
</footer>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-sidebar {
  width: 100%;
  display: flex;
  align-items: start;
  font-size: var(--font-size-100, 0.875rem);
  color: var(--sidebar-color-text-default, #404040);
  box-sizing: border-box;
  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
  padding-right: 4rem;
  position: relative;
}
@media screen and (min-width: 680px) {
  .mc-sidebar {
    display: inline-flex;
    padding-right: 0;
    width: 18.75rem;
  }
}
.mc-sidebar__wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100vh;
  width: 100%;
  padding: 0.75rem;
  background-color: var(--sidebar-color-background-primary, #ffffff);
}
.mc-sidebar__wrapper--divider {
  border-right: 1px solid var(--divider-color-secondary, #999999);
}
.mc-sidebar__close-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
@media screen and (min-width: 680px) {
  .mc-sidebar__close-button {
    display: none;
  }
}
.mc-sidebar__container {
  flex-grow: 1;
}
.mc-sidebar__floating-item {
  position: absolute;
  z-index: var(--sidebar-floating-item-index, 4);
  padding-left: 1.25rem;
  left: calc(2.5rem - 1px);
}
.mc-sidebar__floating-item--tooltip {
  top: 0.25rem;
}
.mc-sidebar__floating-item--expanded {
  left: 0;
  padding: 0;
}
@media screen and (min-width: 680px) {
  .mc-sidebar__floating-item--expanded {
    left: 18.5rem;
  }
}
.mc-sidebar__floating-item--hidden {
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  height: 0;
  pointer-events: none;
}
.mc-sidebar--expanded .mc-sidebar__menu {
  padding: 0 0.25rem;
}
.mc-sidebar--collapsed {
  width: 4rem;
}
.mc-sidebar--collapsed .mc-sidebar__menu {
  padding: 0;
}

.mc-sidebar__footer {
  width: 100%;
}
.mc-sidebar__footer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.mc-sidebar__footer-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius-full, 100%);
}
.mc-sidebar__footer-profile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  flex-grow: 1;
  border-radius: var(--border-radius-s, 0.25rem);
  background-color: var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));
  cursor: pointer;
  border: none;
}
.mc-sidebar__footer-profile:hover {
  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-sidebar__footer-content {
  display: none;
}
.mc-sidebar__footer-title {
  margin: 0;
  text-align: left;
  color: var(--sidebar-color-section-item-text-default, #404040);
  font-weight: var(--font-weight-bold, 700);
}
.mc-sidebar__footer-subtitle {
  margin: 0;
  font-size: var(--font-caption, 0.75rem);
  color: var(--sidebar-color-job-title, #666666);
}
.mc-sidebar__footer-expand {
  display: none;
  min-width: 2.5rem;
  min-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  transform: none;
}
@media screen and (min-width: 680px) {
  .mc-sidebar__footer-expand {
    display: inline-flex;
  }
}
.mc-sidebar__footer-expand--mobile {
  position: relative;
}
@media screen and (min-width: 680px) {
  .mc-sidebar__footer-expand--mobile {
    display: none;
  }
}
.mc-sidebar__footer--expanded .mc-sidebar__footer-container {
  flex-direction: row;
  justify-content: flex-end;
  height: 3.5rem;
}
.mc-sidebar__footer--expanded .mc-sidebar__footer-content {
  display: block;
}
.mc-sidebar__footer--expanded .mc-sidebar__footer-expand {
  transform: rotate(180deg);
}
.mc-sidebar__footer--collapsed .mc-sidebar__footer-container {
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
}
.mc-sidebar__footer--collapsed .mc-sidebar__footer-content {
  display: none;
}
.mc-sidebar__footer--collapsed .mc-sidebar__footer-profile {
  justify-content: center;
}
.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand {
  transform: none;
}
.mc-sidebar__footer-menu {
  width: 19.75rem;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  background-color: var(--listbox-color-background, #ffffff);
  border: 1px solid var(--listbox-color-border, #cccccc);
  border-radius: var(--border-radius-m, 0.5rem);
  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
}
@media screen and (min-width: 680px) {
  .mc-sidebar__footer-menu {
    width: 18.75rem;
  }
}
.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider {
  margin: 0.5rem 0.75rem;
}

.mc-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.mc-sidebar__header-logo {
  width: 2.5rem;
  height: 2.5rem;
}
.mc-sidebar__header-title {
  font-size: var(--font-size-200, 1.125rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--sidebar-color-product-name, #000000);
  margin: 0;
  flex-grow: 1;
  display: none;
}
.mc-sidebar__header--expanded .mc-sidebar__header-title {
  display: block;
}
.mc-sidebar__header--collapsed .mc-sidebar__header-title {
  display: none;
}

.mc-sidebar__listbox {
  min-width: 18.75rem;
  border-radius: var(--border-radius-m, 0.5rem);
  background-color: var(--listbox-color-background, #ffffff);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
}
.mc-sidebar__listbox-title {
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-semi-bold, 600);
  padding-bottom: 0.75rem;
  margin: 0;
  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
  color: var(--sidebar-color-shortcut-item-text-default, #404040);
}

.mc-sidebar__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.mc-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.5rem;
  width: 100%;
  padding-left: 0.25rem;
  text-align: left;
  text-decoration: none;
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--sidebar-color-section-item-text-default, #404040);
  border-radius: var(--border-radius-m, 0.5rem);
  background: transparent;
  border: none;
  cursor: pointer;
}
.mc-sidebar__link--selected {
  color: var(--sidebar-color-section-item-text-selected, #006902);
  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
}
.mc-sidebar__link--locked {
  pointer-events: none;
}
.mc-sidebar__link:not(.mc-sidebar__link--selected):hover {
  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-sidebar__link:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-sidebar__link-expand:open .mc-sidebar__sub {
  transform: rotate(180deg);
}
.mc-sidebar__link:is(summary) .mc-sidebar__text {
  flex-grow: 1;
}

.mc-sidebar__icon {
  fill: currentcolor;
  width: 1.5rem;
  height: 1.5rem;
}

.mc-sidebar__indicator {
  fill: currentcolor;
  width: 1.25rem;
  height: 1.25rem;
}

.mc-sidebar__text {
  display: block;
}

.mc-sidebar__sub {
  width: 1.25rem;
  height: 1.25rem;
}

.mc-sidebar__sublist {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mc-sidebar__item {
  position: relative;
  width: 100%;
}
.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.25rem;
  padding-left: 0.5rem;
  margin-bottom: 0.125rem;
  height: 2rem;
  text-decoration: none;
  color: var(--sidebar-color-section-item-text-default, #404040);
  border-radius: var(--border-radius-m, 0.5rem);
  background: transparent;
  border: none;
  cursor: pointer;
}
.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text {
  display: block;
  font-size: var(--font-body-s, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
}
.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected {
  color: var(--sidebar-color-section-item-text-selected, #006902);
  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
}
.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):hover {
  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-sidebar__item--collapsed .mc-sidebar__text,
.mc-sidebar__item--collapsed .mc-sidebar__sub,
.mc-sidebar__item--collapsed .mc-sidebar__sublist {
  display: none;
}
.mc-sidebar__item--collapsed .mc-sidebar__link {
  padding: 0;
  justify-content: center;
}

.mc-sidebar__shortcut-wrapper {
  width: 100%;
  display: grid;
  justify-content: center;
  position: relative;
}

.mc-sidebar__shortcut-list {
  display: flex;
  margin: 0;
}
.mc-sidebar__shortcut-list--grid {
  padding: 0;
  gap: 0.5rem;
  align-items: center;
}
.mc-sidebar__shortcut-list--stacked {
  gap: 0.25rem;
  flex-direction: column;
  padding: 0;
}
.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating) {
  padding: 0 0 0.5rem 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
}

.mc-sidebar__shortcut-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  list-style: none;
  border-radius: var(--border-radius-m, 0.5rem);
  overflow: hidden;
}
.mc-sidebar__shortcut-item:hover {
  background-color: var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));
}
.mc-sidebar__shortcut-item:nth-child(n+5) {
  display: none;
}
.mc-sidebar__shortcut-item--grid {
  justify-content: center;
  padding: 0 0.125rem;
  height: 3rem;
  width: 3.9375rem;
  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
}
.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link {
  flex-direction: column;
  gap: 0.125rem;
}
.mc-sidebar__shortcut-item--stacked {
  padding: 0.125rem 0.25rem;
  width: 12.5rem;
  height: 2.5rem;
}
.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating {
  width: 100%;
  padding: 0.125rem 0 0.125rem 0.25rem;
}
.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label {
  font-weight: var(--font-weight-semi-bold, 600);
  font-size: var(--font-body-m, 1rem);
}
.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link {
  gap: 0.25rem;
}
.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item {
  background-color: var(--sidebar-color-shortcut-item-background-selected, #ebf5de);
}
.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label {
  color: var(--sidebar-color-shortcut-item-text-selected, #006902);
}
.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon {
  fill: var(--sidebar-color-shortcut-item-text-selected, #006902);
}
.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger) {
  width: 3rem;
  height: 3rem;
  justify-content: center;
  border: none;
  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
}
.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover {
  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
}

.mc-sidebar__shortcut-link:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-sidebar__shortcut-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-sidebar__shortcut-label {
  font-size: var(--font-size-25, 0.625rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-s, 1.3);
  color: var(--sidebar-color-shortcut-item-text-default, #404040);
  white-space: nowrap;
  overflow: hidden;
}

.mc-sidebar__shortcut-icon {
  fill: var(--sidebar-color-shortcut-item-text-default, #404040);
  width: 1.5rem;
  height: 1.5rem;
}

.mc-button {
  color: var(--button-color-filled-standard-font, #ffffff);
  background-color: var(--button-color-filled-standard-background, #464e63);
}
.mc-button:hover {
  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
  color: var(--button-color-filled-standard-font, #ffffff);
}
.mc-button:active {
  background-color: var(--button-color-filled-standard-active-background, #242938);
}
.mc-button:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button {
  font-weight: var(--font-weight-semi-bold, 600);
  padding: 0 calc(1rem - 0.125rem);
  min-height: 3rem;
  min-width: 3rem;
  border-radius: var(--button-border-radius-m, 0.25rem);
}
.mc-button .mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button {
  display: inline-flex;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  border: 2px solid transparent;
  transition: all ease 200ms;
  transition: box-shadow 200ms ease;
  align-items: center;
  box-sizing: border-box;
  font-family: inherit;
  fill: currentcolor;
  gap: 0.25rem;
  cursor: pointer;
}
.mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button:focus {
  box-shadow: none;
  outline: none;
}
.mc-button:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-button--s {
  padding: 0 calc(0.75rem - 0.125rem);
  min-height: 2rem;
  min-width: 2rem;
  border-radius: var(--button-border-radius-s, 0.25rem);
}
.mc-button--s .mc-button__label {
  font-size: var(--font-size-100, 0.875rem);
}
.mc-button--s .mc-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-button--s .mc-button__icon:only-child {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-button--m {
  padding: 0 calc(1rem - 0.125rem);
  min-height: 3rem;
  min-width: 3rem;
  border-radius: var(--button-border-radius-m, 0.25rem);
}
.mc-button--m .mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button--m .mc-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button--m .mc-button__icon:only-child {
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button--l {
  padding: 0 calc(1.25rem - 0.125rem);
  min-height: 4rem;
  min-width: 4rem;
  border-radius: var(--button-border-radius-l, 0.25rem);
}
.mc-button--l .mc-button__label {
  font-size: var(--font-size-200, 1.125rem);
}
.mc-button--l .mc-button__icon {
  width: 2rem;
  height: 2rem;
}
.mc-button--l .mc-button__icon:only-child {
  width: 2rem;
  height: 2rem;
}
.mc-button--icon-only {
  padding: 0.25rem;
}
.mc-button--outlined {
  color: var(--button-color-outlined-standard-font, #242938);
  border-color: var(--button-color-outlined-standard-border, #8891aa);
  background-color: var(--button-color-outlined-standard-background, #ffffff);
}
.mc-button--outlined:hover {
  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
  color: var(--button-color-outlined-standard-font, #242938);
}
.mc-button--outlined:active {
  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
}
.mc-button--outlined:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost {
  color: var(--button-color-ghost-standard-font, #242938);
  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost:hover {
  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
  color: var(--button-color-ghost-standard-font, #242938);
}
.mc-button--ghost:active {
  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
}
.mc-button--ghost:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--accent {
  color: var(--button-color-filled-accent-font, #ffffff);
  background-color: var(--button-color-filled-accent-background, #117f03);
}
.mc-button--accent:hover {
  background-color: var(--button-color-filled-accent-hover-background, #006902);
  color: var(--button-color-filled-accent-font, #ffffff);
}
.mc-button--accent:active {
  background-color: var(--button-color-filled-accent-active-background, #035010);
}
.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--danger {
  color: var(--button-color-filled-danger-font, #ffffff);
  background-color: var(--button-color-filled-danger-background, #c61112);
}
.mc-button--danger:hover {
  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
  color: var(--button-color-filled-danger-font, #ffffff);
}
.mc-button--danger:active {
  background-color: var(--button-color-filled-danger-active-background, #530000);
}
.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--inverse {
  --focus-color-mid: var(--focus-color-outline-outer, #000000);
  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
  color: var(--button-color-filled-inverse-font, #242938);
  background-color: var(--button-color-filled-inverse-background, #ffffff);
}
.mc-button--inverse:hover {
  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
  color: var(--button-color-filled-inverse-font, #242938);
}
.mc-button--inverse:active {
  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
}
.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--icon-button {
  border-radius: var(--border-radius-full, 100%);
  padding: 0;
}
.mc-button--loading {
  pointer-events: none;
}
.mc-button--loading .mc-button__loader {
  position: absolute;
  color: currentcolor;
}
.mc-button--loading .mc-button__label,
.mc-button--loading .mc-button__icon {
  visibility: hidden;
}
.mc-button--outlined.mc-button--standard {
  color: var(--button-color-outlined-standard-font, #242938);
  border-color: var(--button-color-outlined-standard-border, #8891aa);
  background-color: var(--button-color-outlined-standard-background, #ffffff);
}
.mc-button--outlined.mc-button--standard:hover {
  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
  color: var(--button-color-outlined-standard-font, #242938);
}
.mc-button--outlined.mc-button--standard:active {
  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
}
.mc-button--outlined.mc-button--standard:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--accent {
  color: var(--button-color-outlined-accent-font, #117f03);
  border-color: var(--button-color-outlined-accent-border, #78be20);
  background-color: var(--button-color-outlined-accent-background, #ffffff);
}
.mc-button--outlined.mc-button--accent:hover {
  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
  color: var(--button-color-outlined-accent-font, #117f03);
}
.mc-button--outlined.mc-button--accent:active {
  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
}
.mc-button--outlined.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--danger {
  color: var(--button-color-outlined-danger-font, #c61112);
  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
  background-color: var(--button-color-outlined-danger-background, #ffffff);
}
.mc-button--outlined.mc-button--danger:hover {
  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
  color: var(--button-color-outlined-danger-font, #c61112);
}
.mc-button--outlined.mc-button--danger:active {
  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
}
.mc-button--outlined.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--inverse {
  color: var(--button-color-outlined-inverse-font, #ffffff);
  border-color: var(--button-color-outlined-inverse-border, #ffffff);
  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
}
.mc-button--outlined.mc-button--inverse:hover {
  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
  color: var(--button-color-outlined-inverse-font, #ffffff);
}
.mc-button--outlined.mc-button--inverse:active {
  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
}
.mc-button--outlined.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--standard {
  color: var(--button-color-ghost-standard-font, #242938);
  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--standard:hover {
  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
  color: var(--button-color-ghost-standard-font, #242938);
}
.mc-button--ghost.mc-button--standard:active {
  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
}
.mc-button--ghost.mc-button--standard:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--accent {
  color: var(--button-color-ghost-accent-font, #117f03);
  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--accent:hover {
  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
  color: var(--button-color-ghost-accent-font, #117f03);
}
.mc-button--ghost.mc-button--accent:active {
  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
}
.mc-button--ghost.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--danger {
  color: var(--button-color-ghost-danger-font, #c61112);
  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--danger:hover {
  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
  color: var(--button-color-ghost-danger-font, #c61112);
}
.mc-button--ghost.mc-button--danger:active {
  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
}
.mc-button--ghost.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--inverse {
  color: var(--button-color-ghost-inverse-font, #ffffff);
  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--inverse:hover {
  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
  color: var(--button-color-ghost-inverse-font, #ffffff);
}
.mc-button--ghost.mc-button--inverse:active {
  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
}
.mc-button--ghost.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}</style>
