@use "../../style/variables" as *;

.#{$prefix}-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;

  &-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;

    &_top-right,
    &_bottom-right {
      right: calc(-1 * (var(--ty-notification-width) + var(--ty-notification-margin)));
      margin-right: var(--ty-notification-margin);
    }

    &_top-left,
    &_bottom-left {
      left: calc(-1 * (var(--ty-notification-width) + var(--ty-notification-margin)));
      margin-left: var(--ty-notification-margin);
    }
  }

  &__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);
    user-select: none;
    transition: all 300ms;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    line-height: inherit;

    &:hover {
      color: var(--ty-notification-close-hover);
    }
  }

  &__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);
  }

  &__icon {
    margin-right: var(--ty-notification-icon-gap);
    height: var(--ty-notification-icon-height);
  }
}