@import 'app/styles/variables.css';

.notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;

  @media (--small-viewport) {
    width: 100%;

    &::before,
    &::after {
      display: none;
    }
  }
}

.notification {
  border-bottom: 1px solid lightgray;
  padding: 15px;
  display: flex;
  flex-direction: row;
  color: var(--lego-font-color);

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }

  &:active {
    border: 2px solid var(--color-light-gray-1);
  }
}

.innerNotification {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 15px;
}

.unRead {
  background-color: rgba(255, 143, 131, 0.29);
}

.icon {
  padding-right: 15px;
}

@import 'app/styles/variables.css';

.notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;

  @media (--small-viewport) {
    width: 100%;

    &::before,
    &::after {
      display: none;
    }
  }
}

.notification {
  border-bottom: 1px solid lightgray;
  padding: 15px;
  display: flex;
  flex-direction: row;
  color: var(--lego-font-color);

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }

  &:active {
    border: 2px solid var(--color-light-gray-1);
  }
}

.innerNotification {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 15px;
  word-break: break-word;
}

.unRead {
  background-color: rgba(255, 143, 131, 0.29);
}

.icon {
  padding-right: 15px;
}

Fix text overflow in notifications
Fix text overflow in notifications
