@import '../../../scss/variables';
@import '../../../scss/mixins/respondTo';
@import '../../../scss/mixins/hover';
@import '../../../scss/mixins/sidebarTransform';

.pinned-live {
  --ripple-max-opacity: .1;
  --background-scale: 1;
  height: var(--pinned-live-height) !important;
  max-height: var(--pinned-live-height) !important;
  padding: 7px 1rem;
  box-sizing: border-box;
  pointer-events: none;

  @include respond-to(medium-screens) {
    body.is-right-column-shown & {
      // exclude also part of padding (16)
      --background-scale: calc(1 - var(--right-column-proportion) - (16 / var(--middle-column-width-value)) * 0.75);

      .c-ripple {
        width: calc(100% * var(--background-scale));
      }
    }
  }

  &-background {
    @include sidebar-transform(0, false);
    background: linear-gradient(90deg, #4588E3 0.79%, #976FFF 54.33%, #E46ACE 97.09%);
    opacity: .1;
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    transform: scaleX(var(--background-scale));
    transform-origin: var(--transform-origin-left-center);
  }

  .c-ripple {
    width: 100%;
    overflow: hidden;

    &__circle {
      background: linear-gradient(90deg, #4588E3 0.79%, #976FFF 54.33%, #E46ACE 97.09%);
    }
  }

  &-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: none;
    pointer-events: all;

    @include hover() {
      .pinned-live-background {
        opacity: .2;
      }
    }
  }

  .reply-title {
    font-weight: var(--font-weight-bold);
  }

  .reply-subtitle {
    color: var(--primary-color);
    width: fit-content;
  }

  .reply-content {
    margin-inline-start: .5625rem;
  }

  .skeleton {
    min-width: 6rem;
  }

  &-button {
    padding: 0 .375rem;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    background-color: inherit;
    position: relative;
    line-height: 1.25rem; // 1.625rem - .1875rem * 2
    border-radius: inherit;

    &-wrap {
      padding: .1875rem;
      margin-inline-end: .5rem;
      background-color: #E36BD0;
      color: #fff;
      position: relative;
      overflow: hidden;
      border-radius: 1.625rem;
      height: 1.625rem;

      @include sidebar-transform();
    }

    &-animation {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
      animation: topbar-live-button-animation 1s forwards cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
}

@keyframes topbar-live-button-animation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
