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

poll-element {
  margin-top: -1px;
  display: block;
  //min-width: 280px;
  width: 330px;
  user-select: none;
  color: var(--primary-text-color);
  
  @include respond-to(handhelds) {
    width: 240px;
    max-width: 100%;
  }

  &:not(.is-closed):not(.is-voted) .poll-answer {
    cursor: pointer;
  }

  .poll {
    &-title {
      font-weight: var(--font-weight-bold);
  
      @include respond-to(handhelds) {
        max-width: 88%;
        white-space: normal;
      }
    }

    &-desc {
      font-size: 14px;
      color: var(--secondary-text-color);
      margin-top: 2px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      position: relative;

      // @include respond-to(handhelds) {
      //   max-width: 280px;
      // }
    }

    &-type {
      margin-top: 2px;
    }

    &-hint {
      position: absolute;
      font-size: 1.5rem;
      top: -4px;
      right: 2px;
      color: var(--primary-color);
      cursor: pointer;
      transform: scale(1);
      
      @include animation-level(2) {
        transition: transform .2s ease;
      }

      // @include respond-to(handhelds) {
      //   right: 16px;
      // }

      &.active {
        transform: scale(0);
        pointer-events: none;
      }
    }

    &-send-vote {
      cursor: default;
    }

    &-avatars {
      display: flex;
      margin-left: 18px;
      cursor: pointer;
    }

    &-avatar {
      border: 1px solid var(--border-color);
      cursor: pointer;
      width: 18px;
      height: 18px;
    }

    &-answer {
      display: flex;
      position: relative;
      padding-bottom: 20px;
      padding-left: 28px;
      margin-top: 1px;

      &-text {
        margin-top: 6px;
        margin-left: 12px;
      }

      &-percents {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        font-weight: var(--font-weight-bold);
        margin-top: 7px;
        font-size: 14px;
        margin-left: -9px;
        text-align: end;
        width: 40px;
      }

      &-selected {
        position: absolute;
        bottom: 1px;
        left: 15px;
        color: #fff;
        background: var(--primary-color);
        border-radius: 50%;
        height: 16px;
        width: 16px;
        font-weight: var(--font-weight-bold);
        font-size: .75rem;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        &:before {
          content: $tgico-check;
          //margin-left: 1px;
          font-weight: var(--font-weight-bold);
        }
      }

      @include hover() {
        .animation-ring {
          visibility: visible;
          transform: scale(1);
        }
      }

      &.is-voting {
        .progress-ring__circle {
          stroke-dashoffset: -19.792;
          animation: pollAnswerRotate .65s linear infinite;
        }
      }

      &:not(.is-correct):not(.is-chosen) {
        .poll-answer-selected {
          opacity: 0;
        }
      }

      // Multiple answers
      &.is-chosing {
        .circle-hover {
          .poll-answer-selected {
            opacity: 1;
          }
        }

        & ~ .poll-footer {
          .poll-send-vote {
            cursor: pointer;
          }
        }
      }
    }

    &-votes-count {
      color: var(--secondary-text-color);
      font-size: .875rem;
      // padding-top: .1875rem; // THIS IS MOCKUP!
      margin-top: -.5rem; // this is human-readable
    }

    &-line {
      height: 35px;
      position: absolute;
      left: 10px;
      bottom: 2px;
      stroke-dashoffset: 0;
	    stroke-dasharray: 0, 485.9;

      use {
        stroke-width: 4px;
        stroke-linecap: round;
        stroke: var(--primary-color);
        fill: none;
      }
    }

    &-footer {
      text-align: center;
      margin: -.375rem -.5rem -.375rem -.625rem;
      height: 2.875rem;
    }

    &-footer-button {
      cursor: pointer;
      width: 100%;
      height: 100%;
      color: var(--primary-color);
      //text-transform: uppercase;
      font-weight: var(--font-weight-bold);
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      //border-bottom-left-radius: 6px;
      //border-bottom-right-radius: 12px;
      font-size: 1rem;
      overflow: hidden;
    }

    &-footer, &-footer-button {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-quiz-timer {
      width: 32px;
      height: 32px;
      stroke: #a3adb6;
      transform: rotate(270deg);
      top: -7px;
      fill: none;
      position: absolute;
      right: -2px;
      stroke-linecap: round;
    }

    &-time {
      font-size: 12px;
      font-weight: var(--font-weight-bold);
      position: absolute;
      right: 27px;
      color: #a3adb6;
    }
  }

  &.is-quiz .poll {
    &-answer {
      &.is-chosen:not(.is-correct) {
        use {
          stroke: var(--danger-color);
        }

        .poll-answer-selected {
          background: var(--danger-color);
          //line-height: 16px;

          &:before {
            content: $tgico-close;
            font-size: 12px;
            //margin-left: 2.5px;
          }
        }
      }
    }

    /* &-line {
      use {

      }
    } */
  }

  .circle-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    position: absolute;
    left: -1px;
    top: -1px;
    transform: scale(1);

    .poll-answer-selected {
      display: flex!important;
      opacity: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 16px;
      animation: none;

      @include animation-level(2) {
        transition: opacity .2s ease;
      }
    }
  }

  .animation-ring {
    display: block;
    border-radius: 50%;
    height: 34px;
    width: 34px;
    background-color: var(--light-secondary-text-color);
    transform: scale(.1);
    visibility: hidden;

    @include animation-level(2) {
      transition: transform .12s ease;
    }
  }

  .progress-ring {
    height: 26px;
    width: 26px;
    top: unset;
    left: unset;

    &__circle {
      transform-origin: center;
      transform: rotate(-90deg);
      stroke-dasharray: 56.5487, 56.5487;
      stroke-dashoffset: 0;
      stroke-opacity: 1;
      stroke-width: 2;
      stroke: var(--poll-circle-color);
      fill: transparent;
    }
  }

  &.is-voted {
    .circle-hover, .animation-ring {
      transform: scale(0);
    }

    .poll-answer-percents {
      opacity: 1;
    }
  }

  &.is-retracting {
    .circle-hover {
      transition-delay: .24s;
    }

    .animation-ring {
      transition-delay: .22s;
    }
  }

  &.animating {
    .poll-line {
      transition: stroke-dashoffset .34s linear, stroke-dasharray .34s linear;
    }

    .poll-answer-selected {
      transition-delay: .24s;
      transition: opacity .1s ease forwards;
    }

    &.is-retracting {
      .poll-answer-selected {
        transition-delay: 0s;
      }
    }

    .poll-answer-percents {
      transition: .34s opacity;
    }

    .progress-ring__circle {
      transition: stroke-dashoffset .15s;
    }

    .circle-hover {
      transition: .1s transform;
    }
  }

  // * correct styles, 26.08.2021
  &.is-multiple {
    .poll-desc {
      margin-bottom: .5rem;
    }

    // ! conflicts with 100% result
    /* .poll-answer {
      margin-left: -.375rem;
    } */
  }

  .c-ripple__circle {
    background-color: var(--light-primary-color);
  }
}

@keyframes pollAnswerRotate {
  to {
    transform: rotate(270deg);
  }
}