@import '../init/breakpoints';
@import '../init/mixins';
@import '../component/superchat';

.livestream__comment {
  list-style-type: none;
  position: relative;

  .date_time {
    color: var(--color-text-subtitle);
    opacity: var(--live-timestamp-opacity);
  }

  &:hover {
    background-color: var(--color-card-background-highlighted);

    .date_time {
      opacity: 0.5;
    }
  }

  @media (min-width: $breakpoint-small) {
    &:not(:hover) {
      .menu__button:not(:focus):not([aria-expanded='true']) {
        opacity: 0;
      }
    }
  }

  .channel-name {
    font-size: var(--font-xsmall);
  }
}

.livestream__comment--mobile {
  @extend .livestream__comment;

  display: flex;
  justify-content: space-between;

  .livestreamComment__menu {
    position: relative;
    right: 0;
    top: 0;
  }

  span,
  p {
    font-size: var(--font-xxsmall) !important;
  }
}

.livestream__comment--mentioned {
  background-color: var(--color-card-background-highlighted);
}

.livestreamComment__info {
  overflow: hidden;
}

.livestream__comment--superchat {
  background-color: var(--color-card-background-highlighted);
  display: unset;

  + .livestream__comment--superchat {
    margin-bottom: var(--spacing-xxs);
  }

  .livestreamComment__body {
    display: flex;
    align-items: flex-start;
    flex-direction: unset;
    flex: unset;
  }

  .livestreamComment__info {
    margin-top: calc(var(--spacing-xxs) / 2);
  }

  .livestreamComment__menu {
    position: absolute;
  }

  &::before {
    position: absolute;
    left: 0;
    height: 100%;
    max-height: 4rem;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    width: 5px;
    background-color: var(--color-superchat);
    content: '';
  }
}

.livestreamComment__body {
  display: flex;
  align-items: flex-start;
  margin-left: var(--spacing-s);
  overflow: hidden;

  .channel-thumbnail {
    @include handleChannelGif(2rem);
    margin-top: var(--spacing-xxs);
    flex-shrink: 0;
  }
}

.livestreamComment__menu {
  position: absolute;
  right: var(--spacing-xs);
  top: var(--spacing-xs);
}

.livestreamComment__superchatBanner {
  @extend .superChat;

  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0.25rem var(--spacing-s);
  display: inline-block;
  position: relative;
}

// This is just a two small circles that overlap to make it look like
// the banner and the left border are connected
.livestreamComment__superchatBanner--corner {
  height: calc(var(--border-radius) * 2);
  width: calc(var(--border-radius) * 2);
  border-radius: 50%;
  position: absolute;
  background-color: var(--color-superchat);
  bottom: 0;
  left: 0;
  transform: translateX(0) translateY(50%);

  &::after {
    content: '';
    height: calc(var(--border-radius) * 2);
    width: calc(var(--border-radius) * 2);
    border-top-left-radius: var(--border-radius);
    background-color: var(--color-card-background);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(25%) translateY(50%);
  }
}

.livestreamComment__text {
  padding-right: var(--spacing-xl);
  padding-bottom: var(--spacing-xxs);

  .markdown-preview {
    p {
      word-break: break-word;
    }

    .channel-name {
      font-size: var(--font-small);
    }
  }
}