@keyframes bouncy-column {
  0% {
    height: 0;
  }

  100% {
    height: 100%;
  }
}

@keyframes bouncy-row {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.poll-icon-arrow-prev {
  display: inline-block;
  vertical-align: middle;

  svg {
    display: block;
    width: 36px;
    height: 36px;
    transform: rotate(270deg);
    color: $color-tui-nordic-blue;
  }
}

.poll-icon-arrow-next {
  display: inline-block;
  vertical-align: middle;

  svg {
    display: block;
    width: 36px;
    height: 36px;
    transform: rotate(90deg);
    color: $color-tui-nordic-blue;
  }
}

.poll {
  animation: .6s ease-out .5s fade-in;
  animation-fill-mode: forwards;
  opacity: 0;

  header {
    margin: $margin-normal $margin-normal $margin-quadruple;
    text-align: left;

    @include breakpoint(sm) {
      text-align: center;
    }
  }

  .poll-icons {
    display: none;
  }

  .poll-items {
    @extend %flexbox-column;
    width: 100%;
    overflow: hidden;

    @include breakpoint(sm) {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .poll-item {
    border-bottom: 2px solid $color-beige-300;
    padding: $margin-enterprise $margin-normal;

    &:first-child {
      border-top: 2px solid $color-beige-300;
    }

    @include breakpoint(sm) {
      display: flex;
      padding: 0;
      flex-direction: column;
      flex-grow: 1;
      border-bottom: none;
      position: relative;

      &:first-child {
        border-top: none;
      }
    }
  }

  @for $i from 1 to 12 {
    .poll-item-size-#{$i} {
      @include breakpoint(sm) {
        flex-basis: calc(#{100% / $i} - #{$margin-half});
        max-width: calc(#{100% / $i} - #{$margin-half});
      }
    }
  }

  .poll-item-title {
    font-weight: bold;
    margin-bottom: $margin-normal;

    @include breakpoint(sm) {
      order: 2;
      text-align: center;
      margin-top: $margin-half;
    }
  }

  .poll-item-title-inline {
    position: relative;

    @include breakpoint(sm) {
      position: static;
    }
  }

  .vote-indicator-horizontal {
    position: absolute;
    width: 100%;
    top: 50%;
    left: calc(100% + #{$margin-normal});
    margin-top: -13px;
    display: flex;

    @include breakpoint(sm) {
      display: none;
    }
  }

  .vote-indicator-text {
    @include font-size(16);
    display: inline-block;
    padding: 0 $margin-half;
    height: 26px;
    line-height: 26px;
    vertical-align: top;
    color: $color-white;
    background-color: $color-tui-red-highlight;
    border-radius: $border-radius-normal;
    white-space: nowrap;

    @include breakpoint(sm) {
      border-radius: 100%;
    }
  }

  .vote-indicator-icon {
    display: inline-block;
    vertical-align: top;
    color: $color-tui-red;

    .pictogram {
      margin-top: 1px;
      transform: rotate(-90deg);
    }
  }

  .vote-indicator-vertical {
    display: none;
    order: 5;
    text-align: center;
    margin-bottom: $margin-normal;

    @include breakpoint(sm) {
      display: block;
    }
  }

  .vote-indicator-vertical-text {
    @include font-size(14);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    padding: $margin-normal;
    line-height: 1.15;
    font-weight: bold;
    color: $color-white;
    background-color: $color-tui-red-highlight;
    border-radius: 100%;
  }

  .vote-indicator-vertical-icon {
    display: block;
    color: $color-tui-red;
    text-align: center;

    .pictogram {
      transform: rotate(180deg);
    }
  }

  .poll-item-data {
    @extend %flexbox-row;

    @include breakpoint(sm) {
      flex-direction: column;
      order: 1;
    }
  }

  .poll-item-value {
    @include font-size(34);
    display: flex;
    color: $color-tui-blue;
    align-items: center;
    justify-content: center;
    background-color: $text-color;
    border-radius: $border-radius-normal;
    margin-right: $margin-half;
    padding: $margin-half $margin-normal;
    font-weight: bold;
    width: 120px;

    @include breakpoint(sm) {
      order: 3;
      margin-right: 0;
      width: 100%;
    }
  }

  .poll-item-icon {
    @include font-size(36);
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: $margin-normal;
    color: $color-tui-nordic-blue;

    .pictogram {
      width: 34px;
      height: 34px;
    }

    @include breakpoint(sm) {
      order: 1;
      margin-left: 0;
      height: auto;
      margin-bottom: $margin-double;

      .pictogram {
        width: 60px;
        height: 60px;
      }
    }
  }

  .poll-item-bar {
    display: flex;
    width: 100%;

    @include breakpoint(sm) {
      flex-direction: column-reverse;
      height: 300px;
      order: 2;
      margin-bottom: $margin-normal;
    }
  }

  .poll-item-bar-extra-margin {
    @include breakpoint(sm) {
      margin-top: 100px;
    }
  }

  .poll-item-bar-extra-height {
    @include breakpoint(sm) {
      height: 400px;
    }
  }

  .poll-item-bar-value {
    position: relative;

    &.horizontal {
      display: block;
      height: 100%;

      @include breakpoint(sm) {
        display: none;
      }
    }

    &.vertical {
      display: none;

      @include breakpoint(sm) {
        display: block;
        width: 100%;
      }
    }
  }

  .poll-item-bar-value-filling {
    background-color: $color-tui-blue;
    border-radius: $border-radius-normal;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    animation: .8s ease-out .3s bouncy-row;

    @include breakpoint(sm) {
      animation: .8s ease-out .3s bouncy-column;
    }
  }
}