@keyframes revealCircle {
  to {
    transform: rotate(180deg);
  }
}

@keyframes fadeInCompletion {
  0% {
    opacity: 0;
    width: 0;
    height: 0;
  }
  100% {
    opacity: 1;
  }
}

.feed-hidden-wrapper {
  margin-top: 30px;

  .feed-hidden-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .feed-hidden-checkmark {
      margin: 1px;

      position: relative;

      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      width: 22px;
      height: 22px;

      border-radius: 50%;

      /** Circle  */
      &::before {
        position: absolute;
        width: inherit;
        height: inherit;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1.5px #00d5e1;
        content: '';
      }

      /** Circle screen */
      .cover {
        position: absolute;
        width: 200%;
        height: inherit;
        transform-origin: 50% 0;
        background: white;
        animation: revealCircle 0.5s ease forwards;
      }

      /** Checkmark */
      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        opacity: 0;
        animation: fadeInCompletion 0.25s ease-in-out 0.5s forwards;
      }
    }

    .hidden-reason-msg {
      margin: 8px 0 16px;
      color: $gray4;
    }

    .hidden-cancel-btn {
      display: flex;
      align-items: center;

      padding: 5px 10px;

      border-radius: 30px;

      background-color: $gray2;
      color: $gray4;
    }
  }

  &::after {
    content: '';
    display: block;
    height: 0.5px;
    background-color: $gray2;
    margin: 36px 0 14px;
  }
}
