<svelte:options
  customElement={{
    tag: 'm-tile-clickable',
    props: {
      bordered: { reflect: true, type: 'Boolean', attribute: 'bordered' },
      internal: { reflect: true, type: 'Boolean', attribute: 'internal' },
    },
  }}
/>

<script lang="ts">
  /**
   * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
   * @slot default - Default slot for the main content of the tile.
   * @slot icon - Named slot for the action icon.
   * @event action {CustomEvent<void>} - Emits when the action button is triggered.
   */

  interface Props {
    /**
     * Defines the visual style of the tile.
     */
    appearance?: 'primary' | 'secondary' | 'inverse';
    /**
     * Adds a border around the tile.
     */
    bordered?: boolean;
    /**
     * If set, the tile becomes an external link (`<a>`).
     * Used to navigate to a full URL.
     * Set `internal` prop to `true` for internal navigation.
     */
    href?: string;
    /**
     * If set, the tile becomes an internal link.
     * Used for navigation within the app.
     */
    internal?: boolean;
    /**
     * Position of the icon relative to the content.
     */
    iconposition?: 'bottom' | 'right';
    /**
     * Callback to trigger when button action is clicked.
     */
    onAction?: () => void;
  }

  let {
    appearance = 'primary',
    bordered = true,
    href,
    internal,
    iconposition = 'right',
    onAction,
  }: Props = $props();

  let element: HTMLElement;

  const rootTag = $derived(href ? 'a' : 'button');

  const behaviorClass = $derived.by(() => {
    if (href) {
      if (internal) {
        return 'mc-tile--navigate';
      }

      return 'mc-tile--external-link';
    }

    return 'mc-tile--open';
  });

  const targetAttr = $derived.by(() => {
    if (href) {
      if (internal) {
        return '_self';
      }

      return '_blank';
    }

    return undefined;
  });

  function handleAction() {
    onAction?.();
    element.dispatchEvent(new CustomEvent('action', { bubbles: true, composed: true }));
  }
</script>

<svelte:element
  this={rootTag}
  bind:this={element}
  class={{
    'mc-tile mc-tile--clickable': true,
    [`mc-tile--${appearance}`]: appearance !== 'primary',
    [behaviorClass]: true,
    'mc-tile--bordered': bordered,
    'mc-tile--action-right': iconposition === 'right',
  }}
  {href}
  target={targetAttr}
  {...rootTag === 'button' ? { onclick: () => handleAction(), type: 'button' } : {}}
>
  <div class="mc-tile__body">
    <slot />
  </div>

  <div class="mc-tile__action">
    <div class="mc-tile__action-icon">
      <slot name="icon" />
    </div>
  </div>
</svelte:element>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-tile {
  border-radius: var(--border-radius-m, 0.5rem);
  background-color: var(--tile-color-background-primary, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.mc-tile--secondary {
  background-color: var(--tile-color-background-secondary, #eff1f6);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--secondary {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--secondary {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--inverse {
  background-color: var(--tile-color-background-inverse, #242938);
  color: var(--color-text-primary-inverse, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--inverse {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--inverse {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--inverse svg,
.mc-tile--inverse .mc-tile__action::after,
.mc-tile--inverse .mc-tile__action-icon {
  color: var(--color-text-primary-inverse, #ffffff);
  fill: var(--color-text-primary-inverse, #ffffff);
}
.mc-tile--inverse.mc-tile--navigate .mc-tile__action::after {
  background-color: var(--color-text-primary-inverse, #ffffff);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-tile--inverse.mc-tile--open .mc-tile__action::after {
  background-color: var(--color-text-primary-inverse, #ffffff);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-tile--inverse.mc-tile--external-link .mc-tile__action::after {
  background-color: var(--color-text-primary-inverse, #ffffff);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-tile__body {
  flex: 1;
}
.mc-tile--bordered {
  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
}
.mc-tile--action-right {
  flex-direction: row;
  align-items: stretch;
}
.mc-tile--action-right .mc-tile__body {
  border-radius: var(--border-radius-m, 0.5rem) 0 0 var(--border-radius-m, 0.5rem);
}
.mc-tile--action-right .mc-tile__action {
  border-radius: 0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem) 0;
  min-width: 4rem;
  justify-content: center;
}
.mc-tile__action {
  border-radius: 0 0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem);
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem 0.5rem;
  gap: 0.5rem;
}
.mc-tile__action-icon {
  margin: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-tile--navigate .mc-tile__action::after {
  content: "";
  margin: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-color-filled-inverse-font, #242938);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-tile--open .mc-tile__action::after {
  content: "";
  margin: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-color-filled-inverse-font, #242938);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-tile--external-link .mc-tile__action::after {
  content: "";
  margin: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-color-filled-inverse-font, #242938);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-tile__item {
  display: flex;
  flex-direction: column;
}

.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {
  border-radius: var(--border-radius-m, 0.5rem);
  background-color: var(--tile-color-background-primary, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {
  cursor: default;
  pointer-events: none;
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary {
  background-color: var(--tile-color-background-secondary, #eff1f6);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse {
  background-color: var(--tile-color-background-inverse, #242938);
  color: var(--color-text-primary-inverse, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse svg,
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse .mc-tile__action::after,
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse .mc-tile__action-icon {
  color: var(--color-text-primary-inverse, #ffffff);
  fill: var(--color-text-primary-inverse, #ffffff);
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--bordered {
  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content) {
  display: flex;
  flex-direction: column;
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content) .mc-tile__content {
  border-top: 1px solid var(--tile-color-border-default, #cccccc);
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.75rem;
  pointer-events: auto;
  background-color: transparent;
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button {
  pointer-events: auto;
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button svg {
  color: inherit;
  fill: currentcolor;
}
.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action).mc-tile--inverse .mc-tile__action .mc-tile__action-button svg {
  color: var(--color-text-primary-inverse, #ffffff);
  fill: var(--color-text-primary-inverse, #ffffff);
}

.mc-tile--clickable {
  border-radius: var(--border-radius-m, 0.5rem);
  background-color: var(--tile-color-background-primary, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--clickable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--clickable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--clickable:hover {
  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable:active {
  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--bordered:hover {
  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--bordered:active {
  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--clickable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--clickable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--clickable {
  transition: box-shadow 200ms ease;
  cursor: pointer;
  position: relative;
}
.mc-tile--clickable::before {
  border-radius: var(--border-radius-s, 0.25rem);
  content: "";
  position: absolute;
  inset: 0.25rem;
  background-color: transparent;
  pointer-events: none;
  outline: 0 solid transparent;
  outline-offset: -0.125rem;
}
.mc-tile--clickable.mc-tile--secondary {
  background-color: var(--tile-color-background-secondary, #eff1f6);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--clickable.mc-tile--secondary {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--clickable.mc-tile--secondary {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--clickable.mc-tile--secondary:hover {
  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--secondary:active {
  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:hover {
  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:active {
  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--inverse {
  background-color: var(--tile-color-background-inverse, #242938);
  color: var(--color-text-primary-inverse, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--clickable.mc-tile--inverse {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--clickable.mc-tile--inverse {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--clickable.mc-tile--inverse:hover {
  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--inverse:active {
  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:hover {
  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:active {
  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable.mc-tile--inverse svg,
.mc-tile--clickable.mc-tile--inverse .mc-tile__action::after,
.mc-tile--clickable.mc-tile--inverse .mc-tile__action-icon {
  color: var(--color-text-primary-inverse, #ffffff);
  fill: var(--color-text-primary-inverse, #ffffff);
}
.mc-tile--clickable.mc-tile--bordered {
  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
}
.mc-tile--clickable: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-tile--clickable:is(button) {
  width: 100%;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  appearance: none;
}
.mc-tile--clickable:is(a) {
  display: flex;
  text-decoration: none;
  color: inherit;
}
.mc-tile--clickable:is(a):visited {
  color: inherit;
}
.mc-tile--clickable:is(a):not(.mc-tile--action-right) {
  flex-direction: column;
}
.mc-tile--clickable:is(div[role=button]) {
  width: 100%;
  cursor: pointer;
}

.mc-tile--expandable {
  border-radius: var(--border-radius-m, 0.5rem);
  background-color: var(--tile-color-background-primary, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--expandable {
  display: block;
  position: relative;
  overflow: hidden;
}
@supports (interpolate-size: allow-keywords) {
  .mc-tile--expandable {
    interpolate-size: allow-keywords;
  }
}
.mc-tile--expandable.mc-tile--secondary {
  background-color: var(--tile-color-background-secondary, #eff1f6);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable.mc-tile--secondary {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable.mc-tile--secondary {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--expandable.mc-tile--bordered {
  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
}
.mc-tile--expandable.mc-tile--borderless {
  border: none;
}
.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) {
  cursor: default;
}
.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button] {
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action::after {
  transform: rotateX(0deg);
  background-color: var(--button-color-filled-inverse-font, #242938);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem;
}
.mc-tile--expandable .mc-tile__header {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.mc-tile--expandable .mc-tile__header::after {
  border-radius: var(--border-radius-m, 0.5rem);
  content: "";
  position: absolute;
  inset: 0.25rem;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable .mc-tile__header::after {
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable .mc-tile__header::after {
    transition: none;
  }
}
.mc-tile--expandable .mc-tile__header[type=button] {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  appearance: none;
}
.mc-tile--expandable .mc-tile__header[type=button]:focus-visible {
  outline: none;
}
.mc-tile--expandable .mc-tile__header[type=button]:focus-visible::after {
  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-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:hover::after {
  background-color: var(--tile-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:active::after {
  background-color: var(--tile-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-tile--expandable .mc-tile__body {
  flex-grow: 1;
  position: relative;
  z-index: 1;
}
.mc-tile--expandable:has(.mc-tile__action) .mc-tile__body {
  border-radius: var(--border-radius-m, 0.5rem) 0 0 0;
}
.mc-tile--expandable .mc-tile__action {
  border-radius: 0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem) 0;
  box-sizing: border-box;
  min-width: 4rem;
  flex-shrink: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.mc-tile--expandable .mc-tile__content {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable .mc-tile__content {
    transition: max-height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable .mc-tile__content {
    transition: none;
  }
}
.mc-tile--expandable .mc-tile__content[aria-hidden=false] {
  max-height: 50rem;
}
@supports (interpolate-size: allow-keywords) {
  .mc-tile--expandable .mc-tile__content {
    height: 0;
    max-height: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .mc-tile--expandable .mc-tile__content {
      transition: height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
      transition-behavior: allow-discrete;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-tile--expandable .mc-tile__content {
      transition: none;
    }
  }
  .mc-tile--expandable .mc-tile__content[aria-hidden=false] {
    height: auto;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action::after {
  transform: rotateX(180deg);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg {
  transform: rotateX(180deg);
}
.mc-tile--expandable .mc-tile__action-button {
  position: relative;
  z-index: 2;
}
.mc-tile--expandable .mc-tile__action-button svg {
  fill: currentcolor;
}
.mc-tile--expandable .mc-tile__action-button:not(.mc-button) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
}
.mc-tile--expandable .mc-tile__action-button:not(.mc-button):focus-visible {
  outline: 0.125rem solid var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline-offset: 0.125rem;
  border-radius: var(--border-radius-s, 0.25rem);
}
.mc-tile--expandable .mc-tile__action-label {
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-semi-bold, 600);
  line-height: var(--line-height-m, 1.5);
}
.mc-tile--expandable.mc-tile--trigger-icon {
  cursor: default;
}
.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__body {
  cursor: default;
}
.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action {
  justify-content: center;
}
.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action::after {
  content: none;
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg {
  transform: rotateX(0deg);
  fill: currentcolor;
}
.mc-tile--expandable.mc-tile--trigger-button {
  cursor: default;
  display: flex;
  flex-direction: column;
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__body {
  cursor: default;
  order: 1;
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__header {
  display: contents;
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action {
  cursor: pointer;
  min-width: auto;
  justify-content: flex-start;
  padding: 0.5rem;
  order: 3;
  box-shadow: 0 1px 0 0 var(--tile-color-border-default, #cccccc);
  border-radius: 0;
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action::after {
  display: none;
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__content {
  order: 2;
  border-radius: 0;
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button {
  font-weight: var(--font-weight-semi-bold, 600);
  width: 100%;
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
  transform: rotateX(0deg);
  fill: currentcolor;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg {
  transform: rotateX(180deg);
}
.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-label {
  flex: initial;
}

.mc-tile--selectable {
  border-radius: var(--border-radius-m, 0.5rem);
  background-color: var(--tile-color-background-primary, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--selectable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--selectable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .mc-tile--selectable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tile--selectable {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-tile--selectable {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
}
.mc-tile--selectable .mc-tile__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.mc-tile--selectable .mc-tile__action {
  background-color: transparent;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: initial;
  padding: 0.75rem 0.75rem;
}
.mc-tile--selectable:has(.mc-tile__content) {
  flex-direction: column;
  align-items: stretch;
}
.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}
.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header .mc-tile__body {
  display: flex;
  flex-direction: column;
}
.mc-tile--selectable:has(.mc-tile__content) .mc-tile__content {
  border-top: 1px solid var(--tile-color-border-default, #cccccc);
}
.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left {
  flex-direction: column;
}
.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left .mc-tile__header {
  flex-direction: row-reverse;
}
.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center {
  align-items: stretch;
}
.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center .mc-tile__header {
  align-items: center;
}
.mc-tile--selectable.mc-tile--input-left {
  flex-direction: row-reverse;
}
.mc-tile--selectable.mc-tile--input-center {
  align-items: center;
}
.mc-tile--selectable:hover {
  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
}
.mc-tile--selectable.mc-tile--selected {
  box-shadow: 0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);
}
.mc-tile--selectable.mc-tile--no-input .mc-tile__action {
  visibility: hidden;
  position: absolute;
}</style>
