ux-notification-list {
  position: fixed;
  width: 300px;
  z-index: @notications-z-index;
  transition: bottom 250ms ease-in-out;

  &.top-right {
    top: 12px;
    right: 12px;
  }

  &.top-left {
    top: 12px;
    left: 12px;
  }

  &.bottom-right {
    bottom: 0;
    right: 12px;
  }

  &.bottom-left {
    bottom: 0;
    left: 12px;
  }

  .notification {
    position: absolute;
    width: 300px;
    padding: 17px 0;
    margin: 0 0 10px;
    background-color: #7b63a3;
    color: #fff;
    border-radius: 3px;
    flex: none;
    transition: top 250ms ease-in-out;

    .dismiss {
      position: absolute;
      color: @notification-color;
      opacity: 1;
      font-size: 0.8125rem;
      right: 5px;
      top: 3px;
      cursor: pointer;
      transition: opacity 0.3s linear;
      background-color: transparent;
      border: none;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}