:host {
  position: fixed;
  z-index: 1;
  bottom: 48px;
  left: 80px;
}

.notify-card {
  --ds-elevation-surface-current: var(--color-gray-fff, #fff);

  position: absolute;
  z-index: 600;
  bottom: 0;

  overflow: hidden;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  gap: 20px;

  box-sizing: border-box;
  width: 420px;
  padding: var(--ds-space-200, 16px);

  appearance: none;
  background-color: var(--theme-hack-bg2-color, var(--color-gray-fff, #fff));
  border: none;
  border-radius: var(--ds-border-radius-100, 3px);
  box-shadow: var(--ds-shadow-overlay, 0 8px 12px #091e423f, 0 0 1px #091e424f);

  transition: background-color 200ms ease 0s;
  animation-duration: 0ms;

  &:not(.active) {
    z-index: 4;
    transform: translateX(0) translateY(100%) translateY(16px);
    transition: transform 400ms ease-in-out 0s;
  }

  &.active {
    z-index: 5;
    transform: translate(0, 0);
    transition: none 0s ease 0s;
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__title {
    display: flex;
    flex: 1 0 24px;
    align-items: center;
    font-weight: 600;
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;

    &__action-item {
      cursor: pointer;

      overflow: hidden;
      flex-flow: wrap;

      max-width: 305px;

      // del
      // font-weight: 500;
      font-weight: 600;
      color: var(--color-href);
      text-overflow: ellipsis;
      white-space: nowrap;

      &:not(.success):hover {
        text-decoration: underline;
      }

      &.success {
        color: #36b37e;
      }
    }
  }

  &__close-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    app-cmf-icon {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}