@use '../../abstracts/' as a;

.msg-donation,
.msg-subscription,
.msg-giftsub,
.msg-massgift,
.msg-broadcast {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  font-size: 1.1em;
  font-weight: 400;
  padding: unset;
  border-radius: 10px;
  border-style: solid;
  border-color: unset;
  border-width: 3px;
  display: flex;
  flex-direction: column;
  margin: a.$gutter-sm a.$gutter-md * 2 a.$gutter-sm a.$gutter-sm;

  .event-wrapper {
    border-radius: 10px;
  }

  .event-top {
    display: flex;
    padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md;
    background-color: a.$color-chat-emphasize;
    justify-content: space-between;
    align-items: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }

  .event-icon {
    color: a.$color-chat-disabled;
    position: relative;
    text-decoration: none;
    display: inline-block;
    border: 0.25em solid transparent;
    opacity: 0.75;
    width: 100%;
    height: 100%;
    transition: background 200ms ease;
  }

  .event-bottom {
    padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md;
    background-color: a.$color-chat-bg;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .event-button {
    width: 2.25em;
    height: 2.25em;
    flex-shrink: 0;

    &:hover:not(:disabled) {
      .event-icon {
        @include a.icon-background('../img/icon-ellipsis-vertical.svg');
      }
    }

    &:disabled {
      cursor: default;
    }
  }

  &:not(:has(.event-bottom)) {
    .event-top {
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }

  .user {
    margin-left: unset;
    text-shadow: none;
  }

  &.censored {
    .text {
      display: none;
    }

    .event-bottom:after {
      color: a.$color-accent;
      cursor: pointer;
      content: '<censored>';
    }

    .event-bottom:hover:after {
      color: a.$color-accent-light;
    }
  }
}

.onstreamchat {
  .msg-donation,
  .msg-subscription,
  .msg-giftsub,
  .msg-massgift,
  .msg-broadcast {
    text-shadow: none;
    padding: 0;
    border-style: none none none solid;
    border-width: 6px;
    border-radius: 0;

    .event-top,
    .event-bottom {
      padding: 0 0 0 a.$gutter-md;
      background: none;
    }

    &.rainbow-border {
      border-style: none none none solid;
      border-width: 6px;
      border-radius: 0;

      &:before {
        content: '';
        position: absolute;
        top: unset;
        right: 100%;
        bottom: unset;
        left: unset;
        z-index: -1;
        margin: -1px 0 0 0;
        border-radius: inherit;
        background: var(--rainbow-gradient);
        aspect-ratio: 1/1;
        height: 100%;
        transform: rotate(90deg);
      }
    }
  }
}
