@limetech/lime-elements/dist/collection/components/snackbar/snackbar.css

Lime Elements

* {
  box-sizing: border-box;
}

aside {
  background: none;
  border: none;
  inset: unset;
  overflow: visible;
  padding: 0.5rem 0.5rem 0 0.5rem;
  right: 0;
  width: var(--limel-snackbar-width, 21rem);
  top: calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));
  transition: opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
aside.is-closing {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
  --limel-snackbar-top-transition-speed: 0.2s;
  --limel-snackbar-opacity-transition-speed: 0.2s;
}

.surface {
  overflow: hidden;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  min-height: 3.25rem;
  border-radius: 0.75rem;
  background-color: rgb(var(--contrast-1400));
  box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);
}

.label {
  color: rgb(var(--contrast-100));
  -webkit-font-smoothing: antialiased;
  font-size: var(--limel-theme-default-small-font-size);
  font-weight: 400;
  padding: 0 0.25rem;
  width: 100%;
  flex-grow: 1;
}

.actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  box-sizing: border-box;
  gap: 0.5rem;
}

.dismiss,
.actions {
  --lime-elevated-surface-background-color: rgb(
      var(--contrast-1300)
  );
}

.dismiss {
  --limel-theme-on-surface-color: rgb(
      var(--contrast-100)
  );
  --icon-background-color: var(--lime-elevated-surface-background-color);
  --fill-color: var(--lime-primary-color, var(--limel-theme-primary-color));
  --track-color: rgb(var(--contrast-800), 0.2);
  transition: opacity 0.1s ease, transform 0.1s ease;
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  transform: scale(0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dismiss svg {
  position: absolute;
  transform: rotate(90deg);
  fill: transparent;
  stroke-dasharray: 100;
  stroke-linecap: round;
}
aside.open .dismiss svg {
  animation: timeout var(--snackbar-timeout) linear forwards;
}
.dismiss .is-closing {
  transform: scale(0.5);
  opacity: 0;
}

.dismiss-button {
  transform: scale(0.8);
  margin: 0;
  padding: 0;
}

@keyframes timeout {
  0% {
    stroke-width: 4;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-width: 1;
    stroke-dashoffset: -100;
    opacity: 0.7;
  }
}
.limel-portal--container {
  font-family: var(--limel-portal-font-family, inherit);
  opacity: 0;
  display: none;
}
.limel-portal--container.is-visible {
  opacity: 1;
  display: inline-block;
}
.limel-portal--container.is-visible > * {
  will-change: opacity, transform;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.94) translate3d(0, 0, 0);
  }
}
.limel-portal--container > * {
  animation: fade-in 0.18s cubic-bezier(0.11, 0.59, 0.18, 1.26) forwards;
}
.limel-portal--container.is-hiding > * {
  animation: fade-out 0.22s ease forwards;
}
.limel-portal--container[data-popper-placement=left-start] > * {
  transform-origin: right top;
}
.limel-portal--container[data-popper-placement=left] > * {
  transform-origin: right center;
}
.limel-portal--container[data-popper-placement=left-end] > * {
  transform-origin: right bottom;
}
.limel-portal--container[data-popper-placement=top-start] > * {
  transform-origin: left bottom;
}
.limel-portal--container[data-popper-placement=top] > * {
  transform-origin: center bottom;
}
.limel-portal--container[data-popper-placement=top-end] > * {
  transform-origin: right bottom;
}
.limel-portal--container[data-popper-placement=right-start] > * {
  transform-origin: left top;
}
.limel-portal--container[data-popper-placement=right] > * {
  transform-origin: left center;
}
.limel-portal--container[data-popper-placement=right-end] > * {
  transform-origin: left bottom;
}
.limel-portal--container[data-popper-placement=bottom-start] > * {
  transform-origin: left top;
}
.limel-portal--container[data-popper-placement=bottom] > * {
  transform-origin: center top;
}
.limel-portal--container[data-popper-placement=bottom-end] > * {
  transform-origin: right top;
}