@use 'colors' as *;
@use 'text-macros' as *;

.question-host {
  @extend .unselectable;

  width: 100%;
  background-color: white;
  margin-left: 5px;
  margin-right: 5px;

  border: 1px solid rgb(233, 233, 233);
  border-radius: 4px;

  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07);

  .text {
    color: #282828;
    width: 80%;
    margin-top: 39px;
    margin-bottom: 20px;
    margin-left: 20px;

    font-size: 16px;
    letter-spacing: 0.25px;
    line-height: 20px;

    text-align: left;

    &.answered {
      color: #8CC63F;
    }

    &.blurr {
      filter: blur(5px);
      -webkit-filter: blur(5px);
    }
  }

  .questionanchor {
    height: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    text-align: left;
    color: black;
    box-shadow: 0px 0px 0px 0px rgba(0, 255, 0, 0);
    transition: box-shadow ease-in-out 500ms;
    transition-property: box-shadow, background-color;

    .time-since {
      color: #B0B0B0;

      margin-left: 20px;
      margin-top: 13px;
      float: left;

      font-size: 10px;
      letter-spacing: 0.16px;
      line-height: 11px;
    }

    .tag {
      margin-left: 8px;
      margin-top: 10px;
      float: left;
      font-size: 10px;
      letter-spacing: 0.16px;
      line-height: 11px;
      border-radius: 10px;
      padding: 3px;
      background-color: #D4D4D4;
      color: white;
    }

    &.highlighted {
      box-shadow: 0px 0px 10px 1px $pink-bg;
      background-color: #999;
    }
  }

  .like-action {
    color: $pink-bg;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 13px;
    margin-bottom: 25px;

    font-size: 14px;
    letter-spacing: 0.22px;
    line-height: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: right;

    cursor: pointer;

    .liked {
      color: #B0B0B0
    }
  }

  .like-count-text {
    font-weight: bold;
    text-anchor: middle;
  }

  .bubble {
    margin-top: 11px;
    margin-right: 9px;

    position: absolute;
    right: 0;

    cursor: pointer;
  }

  @keyframes wiggle {
    0% {
      transform: skewX(9deg);
    }

    10% {
      transform: skewX(-8deg);
    }

    20% {
      transform: skewX(7deg);
    }

    30% {
      transform: skewX(-6deg);
    }

    40% {
      transform: skewX(5deg);
    }

    50% {
      transform: skewX(-4deg);
    }

    60% {
      transform: skewX(3deg);
    }

    70% {
      transform: skewX(-2deg);
    }

    80% {
      transform: skewX(1deg);
    }

    90% {
      transform: skewX(0deg);
    }

    100% {
      transform: skewX(0deg);
    }
  }

  .wiggle {
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    animation-duration: 1s;
  }

  .checkmark {
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 13px;
    margin-bottom: 25px;
  }

  .options {
    position: relative;
    top: -45px;

    .button-hide {
      color: $pink-button;

      margin-top: 15px;
      margin-left: 20px;
      cursor: pointer;

      border: none;
      background-color: transparent;
    }

    .button-answered {
      float: right;

      color: #7BBE31;

      margin-top: 15px;
      margin-right: 19px;
      cursor: pointer;

      border: none;
      background-color: transparent;
    }

    .button-hide.reverse {
      color: $col-button-disabled;
    }

    .button-answered.reverse {
      color: $col-button-disabled;
    }
  }
}

.unscreened-question {
  background: #e2e2e2;
  border-color: #bdbaba;
}
