<script lang="ts">
  /**
   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
   *
   * @slot tab - use this slot to insert `m-tab` components.
   */
  interface Props {
    [key: string]: any;
    /**
     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
     */
    description?: string;
    /**
     * If `true`, the divider will appear.
     */
    divider?: boolean;
    /**
     * If `true`, the tabs of the component will be centered.
     */
    centered?: boolean;
  }

  let { description, divider = true, centered, class: className, ...attrs }: Props = $props();
</script>

<nav class={['mc-tabs', centered && 'mc-tabs--centered', className]} {...attrs}>
  <ul class="mc-tabs__list" role="tablist" aria-label={description}>
    <slot name="tab" />
  </ul>
  {#if divider}
    <div class="mc-divider-horizontal"></div>
  {/if}
</nav>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-tabs {
  background-color: var(--tabs-color-background-default, #ffffff);
  position: relative;
  width: 100%;
  height: 3.5rem;
}
.mc-tabs__list {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block: 0;
  display: flex;
  gap: 0.5rem;
  padding: var(--tabs-list-padding, 0.5rem 0.25rem);
  overflow: scroll;
}
@media screen and (min-width: 681px) {
  .mc-tabs__list {
    overflow: hidden;
  }
}
.mc-tabs__tab {
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-semi-bold, 600);
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--border-radius-s, 0.25rem);
  color: var(--tabs-color-text-default, #404040);
  cursor: pointer;
  display: flex;
  gap: 0.25rem;
  height: 2.5rem;
  justify-content: center;
  outline: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  position: relative;
  text-decoration: none;
}
.mc-tabs__tab:hover {
  background-color: var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-tabs__tab: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-tabs__tab--selected {
  color: var(--tabs-color-text-selected, #006902);
  background-color: var(--tabs-color-background-selected, #ebf5de);
}
.mc-tabs__tab--selected:hover {
  background-color: var(--tabs-color-background-selected-hover, #c5e39e);
}
.mc-tabs__tab--disabled {
  color: var(--tabs-color-text-disabled, #b3b3b3);
  cursor: not-allowed;
}
.mc-tabs__tab--disabled:hover {
  background: none;
}
.mc-tabs__label {
  pointer-events: none;
  white-space: nowrap;
}
.mc-tabs__icon {
  fill: currentcolor;
  height: 1.5rem;
  width: 1.5rem;
}
.mc-tabs--centered .mc-tabs__list {
  justify-content: center;
}

.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;
}</style>
