@import "scss/vars.scss";

.mt-polls {
  $borderRadius: 8px;
  $height: 34px;

  .bar-button {
    position: relative;
    height: $height;
    line-height: $height;
    color: $darkFont;
    cursor: pointer;

    //border: 1px solid;

    &:hover {
      .bar-button__background {
        background: #DCE2E6;
      }

    }

    &__background {
      background: #EEF1F3;
      cursor: pointer;
      border-radius: $borderRadius;
      width: 100%;
      position: absolute;
      height: $height;
    }

    &__text {
      height: $height;
      position: absolute;
      top: 0;
      width: calc(100% - 16px);
      @include clearfix;
      margin: 0 8px;
      font-size: 16px;
      z-index: 3333;

    }

    &__progress {
      height: $height;
      line-height: $height;
      border-radius: $borderRadius 0 0 $borderRadius;
      background: #DCE2E6;

      transition: 700ms ease-out;
      position: absolute;
      z-index: 2222;

      &--lead {
        background: #93D2FF;
      }
    }

    &__label {
      float: left;
    }

    &__percentage {
      float: right;
      margin-left: .4em;
      font-weight: bold;
      font-size: 14px;
      color: #384049;
    }

    &__icon {
      float: right;
      line-height: $height;
      display: none;

      &--selected {
        display: inline-block;
      }
    }

    &:hover {
      .bar-button__icon {
        display: inline-block;
        svg {
          path {
            fill: #384049;
          }
        }
      }
    }

    @media screen and (max-width: 400px) {

      $multipleHeight: 52px;
      &--multiple {
        height: $multipleHeight;
        line-height: normal;
        position: relative;

        .bar-button__progress, .bar-button__text {
          height: $multipleHeight;
          line-height: normal;

        }

        .bar-button__background {
          height: $multipleHeight;

        }

        .bar-button__label {
          width: calc(100% - 40px);
          //top: 7px;
          //position: relative;
          //padding: 7px 0;
          //height: 40px;

          position: relative;
          height: 52px;

          div {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }

        }

        .bar-button__percentage {
          line-height: $multipleHeight;
        }

        .bar-button__icon {
          position: relative;
          top: 9px;
          right: 0;
        }
      }

    }

  }

  .mt-poll-view__bars--results {
    .bar-button:hover {
      .bar-button__icon {
        display: none;
      }
    }
    .bar-button--lead:hover {
      .bar-button__icon {
        display: inline-block;
      }
    }
  }
}