<script lang="ts">
  /**
   * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
   *
   * @slot default - Use this slot to insert the textual content of the Link.
   * @slot icon - Use this slot to insert an icon for the Link.
   */
  interface Props {
    [key: string]: any;
    /**
     * Position of the icon relative to the text.
     */
    iconposition?: 'left' | 'right';
    /**
     * Allows to define the link appearance.
     */
    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';
    /**
     * Allows to define the link size.
     */
    size?: 's' | 'm';
    /**
     * URL for the link.
     */
    href?: string;
    /**
     * Where to open the link.
     */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /**
     * Specify wether the link is inline.
     */
    inline?: boolean;
  }

  let {
    href,
    target,
    inline,
    appearance = 'standard',
    size = 's',
    iconposition = 'left',
    class: className,
    ...attrs
  }: Props = $props();
</script>

<a
  class={[
    'mc-link',
    `mc-link--${appearance}`,
    `mc-link--${size}`,
    inline && 'mc-link--inline',
    !inline && 'mc-link--stand-alone',
    className,
  ]}
  {href}
  {target}
  {...attrs}
>
  {#if iconposition === 'left'}
    <span class="mc-link__icon">
      <slot name="icon" />
    </span>
  {/if}
  <span class="mc-link__label">
    <slot />
  </span>
  {#if iconposition === 'right'}
    <span class="mc-link__icon">
      <slot name="icon" />
    </span>
  {/if}
</a>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-link {
  transition: box-shadow 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  text-decoration: none;
  color: var(--link-color-text-primary, #000000);
  font-size: 0.875rem;
}
.mc-link__label {
  line-height: 1.3;
}
.mc-link__icon {
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  fill: currentcolor;
}
.mc-link:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label {
  text-decoration: underline;
}
.mc-link:focus {
  box-shadow: none;
  outline: none;
}
.mc-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-link--m {
  min-height: 2rem;
  font-size: 1rem;
}
.mc-link--secondary {
  color: var(--link-color-text-secondary, #666666);
}
.mc-link--accent {
  color: var(--link-color-text-accent, #117f03);
}
.mc-link--inverse {
  --focus-color-mid: var(--focus-color-outline-outer, #000000);
  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
  color: var(--link-color-text-inverse, #ffffff);
}
.mc-link--stand-alone {
  min-height: 2rem;
  font-weight: var(--link-font-weight, 600);
}
.mc-link--stand-alone .mc-link__label {
  border-bottom: var(--border-width-s, 0.0625rem) solid currentcolor;
}
.mc-link--stand-alone:hover .mc-link__label {
  border-color: transparent;
}
.mc-link--inline {
  font-weight: inherit;
  text-decoration: underline;
}
.mc-link--inline .mc-link__label {
  line-height: 1;
}
.mc-link--inline:hover {
  text-decoration: none;
}

.mc-link__icon:empty {
  display: none;
}</style>
