@use "sass:meta";
@use "../mixin";

// https://m3.material.io/components/snackbar/overview

.snackbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;

  position: fixed;
  bottom: 0px;
  right: 12px;

  max-width: 840px;
  min-width: 240px;

  padding-inline: 16px 8px;

  background-color: var(--md-sys-color-inverse-surface);

  border-radius: var(--md-sys-shape-corner-extra-small);

  box-shadow: var(--md-sys-elevation-level3);
  opacity: 0;
  transition: var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-emphasized);
  z-index: 99;

  #snackbar-supporting {
    @include mixin.typescale-style("label-large");

    display: inline-block;

    padding-block: 14px;

    color: var(--md-sys-color-inverse-on-surface);
  }

  #snackbar-icon {
    min-width: 40px;

    color: var(--md-sys-color-inverse-on-surface);
  }

  &[visible="true"] {
    opacity: 1;
  }

  &[visible="false"] {
    opacity: 0;
  }

  @media screen and (max-width: 840px) {
    left: 12px;

    width: calc(100% - 24px);
  }
}
