.ty-notification {
  position: relative;
  padding: var(--ty-notification-padding);
  border-radius: var(--ty-notification-border-radius);
  color: var(--ty-notification-color);
  font-size: var(--ty-notification-font-size);
  box-shadow: var(--ty-notification-shadow);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}
.ty-notification-container {
  width: var(--ty-notification-width);
  position: fixed;
  background-color: var(--ty-notification-bg);
  z-index: var(--ty-notification-z-index);
  box-sizing: border-box;
  transition: all 200ms;
}
.ty-notification-container_top-right, .ty-notification-container_bottom-right {
  right: calc(-1 * (var(--ty-notification-width) + var(--ty-notification-margin)));
  margin-right: var(--ty-notification-margin);
}
.ty-notification-container_top-left, .ty-notification-container_bottom-left {
  left: calc(-1 * (var(--ty-notification-width) + var(--ty-notification-margin)));
  margin-left: var(--ty-notification-margin);
}
.ty-notification__close {
  position: absolute;
  right: var(--ty-notification-close-offset-inline-end);
  top: var(--ty-notification-close-offset-top);
  cursor: pointer;
  color: var(--ty-notification-close-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 300ms;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
.ty-notification__close:hover {
  color: var(--ty-notification-close-hover);
}
.ty-notification__title {
  padding-right: var(--ty-notification-title-padding-inline-end);
  margin-bottom: var(--ty-notification-title-margin-bottom);
  color: var(--ty-notification-title-color);
  font-size: var(--ty-notification-title-font-size);
  line-height: var(--ty-notification-title-line-height);
}
.ty-notification__icon {
  margin-right: var(--ty-notification-icon-gap);
  height: var(--ty-notification-icon-height);
}