<svelte:options customElement={{ tag: 'm-divider' }} />

<script lang="ts">
  /**
   * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.
   *
   * @slot default - Use this slot to insert the content who need a vertical divider
   */
  interface Props {
    [key: string]: any;
    /**
     * Determines the orientation of the divider.
     */
    orientation?: 'vertical' | 'horizontal';
    /**
     * Determines the appearance of the divider.
     */
    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
    /**
     * Determines the size of the divider.
     */
    size?: 's' | 'm' | 'l';
  }

  let {
    orientation = 'horizontal',
    appearance = 'primary',
    size = 's',
    class: className,
    ...attrs
  }: Props = $props();
</script>

<div class={['mc-divider', className]} {...attrs}>
  <div
    class={[
      `mc-divider-${orientation}`,
      `mc-divider-horizontal--${appearance}`,
      `mc-divider-horizontal--${size}`,
    ]}
  ></div>
  <slot />
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-divider {
  position: relative;
}
.mc-divider-horizontal {
  background: var(--divider-color-primary, #cccccc);
  height: 0.0625rem;
}
.mc-divider-horizontal--secondary {
  background: var(--divider-color-secondary, #999999);
}
.mc-divider-horizontal--tertiary {
  background: var(--divider-color-tertiary, #333333);
}
.mc-divider-horizontal--inverse {
  background: var(--divider-color-inverse, #ffffff);
}
.mc-divider-horizontal--m {
  height: 0.25rem;
}
.mc-divider-horizontal--l {
  height: 0.5rem;
}
.mc-divider-vertical {
  background: var(--divider-color-primary, #cccccc);
  width: 0.0625rem;
}
.mc-divider-vertical--secondary {
  background: var(--divider-color-secondary, #999999);
}
.mc-divider-vertical--tertiary {
  background: var(--divider-color-tertiary, #333333);
}
.mc-divider-vertical--inverse {
  background: var(--divider-color-inverse, #ffffff);
}
.mc-divider-vertical--m {
  height: 0.25rem;
}
.mc-divider-vertical--l {
  height: 0.5rem;
}

.mc-divider-vertical {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}</style>
