@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/radius';
@import '@vtmn/css-design-tokens/src/z-indexes';

.vtmn-toast {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: rem(8px) rem(16px);
  min-block-size: rem(48px);
  inline-size: fit-content;
  justify-content: space-between;
  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_toast);
  box-sizing: border-box;
  outline: 0;
}

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

.vtmn-toast--with-icon-info > .vtmn-toast_content::before {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  inline-size: rem(24px);
  block-size: rem(24px);
  content: '';
  background-color: var(--vtmn-semantic-color_content-primary-reversed);
  margin-inline-end: rem(16px);
  mask: url("data:image/svg+xml;charset=utf-8, <svg width='24' height='24' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.666 6.666 0 1 0 13.333 0A6.666 6.666 0 0 0 1.333 8zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0zM8.667 4.667V6H7.333V4.667h1.334zm0 6.666v-4H7.333v4h1.334z'/></svg>");
}

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

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

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

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