/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.spoiler {
  --anim: .4s ease;
  // position: relative; // ! idk what it was for
  background-color: var(--spoiler-background-color);
  
  &-text {
    opacity: 0;
  }
  
  /* &-draft {
    background-color: var(--spoiler-draft-background-color);
  } */
}

.spoilers-container {
  .custom-emoji-canvas {
    z-index: -1;
  }

  // &.will-change {
  //   .spoiler {
  //     // box-shadow: 0 0 var(--spoiler-background-color);

  //     &-text {
  //       filter: blur(6px);
  //     }
  //   }
  // }

  &.is-spoiler-visible {
    &.animating {
      .spoiler {
        transition: /* box-shadow var(--anim), */ background-color var(--anim);

        &-text {
          transition: opacity var(--anim)/* , filter var(--anim) */;
        }
      }
    }

    &:not(.backwards) {
      .spoiler {
        background-color: transparent;
        // box-shadow: 0 0 30px 30px transparent;
    
        &-text {
          // filter: blur(0);
          opacity: 1;
        }
      }
    }

    // &.backwards {
    //   .spoiler-text {
    //     filter: blur(3px);
    //   }
    // }
  }

  &:has(.message-spoiler-overlay) {
    .spoiler {
      background-color: unset;
    }
  }

  &:not(.is-spoiler-visible):not(:has(.message-spoiler-overlay)) {
    .spoiler {
      cursor: pointer;

      &-text {
        pointer-events: none;
      }
    }
  }

  &.can-show-spoiler-text .spoiler-text {
    opacity: 1;
  }
}

.message-spoiler-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
  &__canvas {
    width: 100%;
    // height: 100%; // Don't set height as blockquote collapsing / uncollapsing is animated

    transition: opacity .4s;

    &--hidden {
      opacity: 0;
    }
  }
}

.bluff-spoiler {
  position: relative;
  display: inline-block;

  --width: 0.75em;
  --index: 0;
  width: var(--width);

  mask-size: 240px 120px;
  mask-repeat: repeat;
  mask-position: calc(var(--index) * var(--width) * -1) 0px;
  // mask-image: none !important;

  opacity: 0;
  transition: opacity 0.2s;
  // transition-delay: 0.2s;

  white-space: pre;

  background-color: currentColor;

  .tabs-container.animating & {
    opacity: 0;
  }
}
