@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/animations';
@import '@vtmn/css-design-tokens/src/z-indexes';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-snackbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-block: rem(8px);
  padding-inline: rem(16px);
  min-block-size: rem(48px);
  inline-size: fit-content;
  min-inline-size: fit-content;
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-2-font-size);
  line-height: var(--vtmn-typo_text-2-line-height);
  color: var(--vtmn-semantic-color_content-primary-reversed);
  background-color: var(--vtmn-semantic-color_background-primary-reversed);
  box-shadow: var(--vtmn-shadow_200);
  border-radius: var(--vtmn-radius_100);
  z-index: var(--vtmn-z-index_snackbar);
  box-sizing: border-box;
  outline: 0;
}

.vtmn-snackbar.show {
  position: fixed;
  inset-inline-end: 50%;
  inset-block-end: 0;
  transform: translate(50%, -50%);
  animation: var(--vtmn-animation_overlay);
}

/* Close button */
.vtmn-snackbar .vtmn-btn {
  margin-inline-start: rem(12px);
  margin-block-start: rem(-6px);
  margin-block-end: rem(-6px);
}

.vtmn-snackbar .vtmn-btn span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_text-2-font-size);
}

@media screen and (max-width: 599px) {
  .vtmn-snackbar {
    inline-size: 90%;
    margin-block: 0;
    margin-inline: auto;
  }

  .vtmn-snackbar.show {
    transform: translate(50%, 0%);
  }
}

.vtmn-snackbar.animate-delay {
  animation-delay: 0s, 0s, var(--vtmn-animation_overlay-duration),
    var(--vtmn-animation_overlay-duration);
}
