<svelte:options
  customElement={{
    tag: 'm-action-bottom-bar',
    props: {
      shadow: { reflect: true, type: 'Boolean', attribute: 'shadow' },
    },
  }}
/>

<script lang="ts">
  import Divider from '../divider/Divider.svelte';
  /**
   * The Action Bottom Bar is a user interface component that provides a fixed area at the bottom of the screen for displaying action buttons and status messages. It is typically used in forms or interactive sections of an application to allow users to perform actions such as saving, resetting, or deleting content, while also providing feedback on the current state of their changes.
   *
   * @slot left - The content displayed left side of the action bottom bar (e.g. StatusNotification or any element).
   * @slot right - Use this slot to insert buttons of the action bottom bar.
   */
  interface Props {
    /**
     * If `true`, adds a shadow to the action bottom bar.
     */
    shadow?: boolean;
  }

  let { shadow }: Props = $props();
</script>

<div class={['mc-action-bottom-bar', shadow && 'mc-action-bottom-bar--shadow']}>
  <div class="mc-action-bottom-bar__divider">
    <Divider />
  </div>

  <div class="mc-action-bottom-bar__left">
    <slot name="left" />
  </div>

  <div class="mc-action-bottom-bar__right">
    <slot name="right" />
  </div>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-action-bottom-bar {
  position: fixed;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: var(--action-bottom-bar-color-background, #ffffff);
}
.mc-action-bottom-bar__divider {
  width: 100%;
}
.mc-action-bottom-bar__icon {
  width: 1.5rem;
  height: 1.5rem;
}
@media screen and (min-width: 679px) {
  .mc-action-bottom-bar__button--icon.mc-button {
    display: none;
  }
}
.mc-action-bottom-bar__button--text.mc-button {
  display: none;
}
@media screen and (min-width: 679px) {
  .mc-action-bottom-bar__button--text.mc-button {
    display: block;
  }
}
.mc-action-bottom-bar__left {
  padding-left: 1rem;
}
@media screen and (min-width: 679px) {
  .mc-action-bottom-bar__left {
    padding-left: 2rem;
  }
}
.mc-action-bottom-bar__right {
  margin-left: auto;
  padding: 0.5rem 1rem 0.5rem 0;
  display: flex;
  gap: 1rem;
}
@media screen and (min-width: 679px) {
  .mc-action-bottom-bar__right {
    padding: 1rem 2rem 1rem 0;
  }
}</style>
