div.poll-outer {
  div.poll {
    margin: 1em 0;
    border: 1px solid var(--primary-low);
    display: grid;
    grid-template-areas: "poll" "info" "buttons";
    @include breakpoint("mobile-extra-large", min-width) {
      grid-template-columns: 1fr 10em;
      grid-template-areas: "poll info" "buttons buttons";
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
      display: inline-block;
      width: 100%;
    }

    li[data-poll-option-id] {
      color: var(--primary);
      padding: 0.5em 0;
      word-break: break-word;
      button {
        background-color: transparent;
        border: none;
        text-align: left;
        padding-left: 23px;
        text-indent: -23px;
      }
    }

    .ranked-choice-poll-options {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      padding: 0.5em;

      .ranked-choice-poll-option {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5em;
        padding: 0.5em;
      }
    }

    .tabs {
      display: none;
    }

    .discourse-poll-ranked_choice-results {
      .tabs {
        &.nav-items {
          display: flex;
          gap: 0.5em;
          .nav-btn {
            background-color: var(--secondary);
            border: none;
            color: var(--primary-medium);
          }
          .active {
            .nav-btn {
              color: var(--primary);
            }
          }
        }
      }
      .rank {
        display: inline-block;
        min-width: 20px;
      }
      .poll-results-ranked_choice-subtitle-rounds {
        margin: 0.25em 0 0.67rem;
      }
    }

    img {
      // Hacky way to stop images without width/height
      // from causing abrupt unintended scrolling
      &:not([width]):not(.emoji),
      &:not([height]):not(.emoji) {
        width: 200px !important;
        height: 200px !important;
        object-fit: contain;
      }
    }

    .poll-info {
      box-sizing: border-box;
      grid-area: info;
      display: flex;
      line-height: var(--line-height-medium);
      color: var(--primary-medium);

      @include breakpoint("mobile-extra-large") {
        border-top: 1px solid var(--primary-low);
        flex-direction: row-reverse;
        &_counts,
        &_instructions {
          padding: 1em;
        }
      }

      @include breakpoint("mobile-extra-large", min-width) {
        gap: 0 1em;
        padding: 1em;
        border-left: 1px solid var(--primary-low);
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      &_counts {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        gap: 0.25em 0;

        @include breakpoint("mobile-extra-large", min-width) {
          justify-content: center;
        }

        @include breakpoint("mobile-extra-large") {
          flex: 1 1 auto;
        }

        &-count {
          gap: 0.25em;
          line-height: 1;
          white-space: nowrap;
          text-align: left;

          .info-label,
          .info-number {
            display: inline;
            margin-right: 0.25em;
            text-align: center;
          }

          @include breakpoint("mobile-extra-large") {
            &:not(:last-child) {
              margin-right: 0.75em;
            }
          }

          @include breakpoint("mobile-extra-large", min-width) {
            &:not(:last-child) {
              margin-bottom: 0.25em;
            }
            display: flex;
            flex-direction: column;
            align-items: center;
            .info-label,
            .info-number {
              margin: 0;
            }
            + .poll-info_counts-count {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: center;
              min-width: 0;
              gap: 0 0.33em;
              margin: 0.5em;
              .info-number,
              .info-label {
                font-size: var(--font-up-1);
                min-width: 0;
                white-space: normal;
                line-height: var(--line-height-medium);
              }
            }
          }
        }
        @include breakpoint("mobile-extra-large", min-width) {
          + .poll-info_instructions:not(:empty) {
            margin-top: 1.25em;
          }
        }
      }

      &_instructions {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: start;
        &:empty {
          display: none;
        }

        @include breakpoint("mobile-extra-large", min-width) {
          padding-top: 1.25em;
          &:not(:empty) {
            border-top: 1px solid var(--primary-low);
          }
        }

        @include breakpoint("mobile-extra-large") {
          padding-right: 1em;
          height: 100%;
          flex: 1 1 auto;
          &:not(:empty) {
            border-right: 1px solid var(--primary-low);
          }
        }

        li {
          display: flex;
          gap: 0.5em;
          &:not(:last-child) {
            margin-bottom: 0.5em;
          }

          @include breakpoint("mobile-extra-large", min-width) {
            &:not(:last-child) {
              margin-bottom: 1em;
            }
            &:not(:first-child:last-child) {
              // only applied when there are multiple items
              .d-icon {
                width: 15%;
              }
              span {
                width: 85%;
              }
            }
            &:first-child:last-child {
              // when there's a single item, it looks better centered
              display: inline;
              text-align: center;
            }
          }
        }

        .d-icon {
          font-size: var(--font-down-1);
          margin-top: 0.2em;
        }
      }

      .info-text {
        margin: 0.25em 0;
        display: block;
      }

      @include breakpoint("mobile-extra-large", min-width) {
        .info-label {
          font-size: var(--font-up-2);
        }
        .info-number {
          font-size: var(--font-up-6);
        }
      }
    }

    .poll-container {
      box-sizing: border-box;
      grid-area: poll;
      padding: 1em;
      width: 100%;
      overflow: visible;
      align-self: center;

      li {
        cursor: pointer;
        font-size: var(--font-up-1);
      }

      .poll-results-number-rating {
        font-size: var(--font-up-5);
      }
    }

    .poll-title {
      border-bottom: 1px solid var(--primary-low);
      margin-bottom: 0.5em;
      padding-bottom: 0.5em;
    }

    .poll-buttons {
      box-sizing: border-box;
      grid-area: buttons;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5em;
      width: 100%;
      padding: 1em;
      border-top: 1px solid var(--primary-low);

      button {
        white-space: nowrap;
        align-self: start;
        .d-button-label {
          @include ellipsis;
        }

        @include breakpoint("tablet") {
          flex: 1 1 0;
          &:first-child:last-child {
            // if there's only one button,
            // don't expand the width
            flex: 0 1 auto;
          }
          &.toggle-results:first-child {
            // don't expand the back button
            flex: 0 1 auto;
            margin-right: auto;
          }
        }

        @include breakpoint("mobile-large") {
          &:first-child:last-child,
          &.cast-votes {
            // ok to expand button width on smaller screens
            flex: 1 1 100%;
          }
        }
      }

      &:empty {
        display: none;
      }
    }

    .poll-voters:not(:empty) {
      min-height: 30px;
      margin-bottom: 0.25em;

      li {
        display: inline;
      }
    }

    .poll-voters-toggle-expand {
      width: 100%;
      text-align: center;

      .spinner {
        margin-top: 0.25em;
      }
    }

    .poll-buttons-dropdown,
    .export-results,
    .toggle-status,
    .show-breakdown,
    .show-tally,
    .show-percentage {
      // we want these controls to be separated
      // from voting controls
      margin-left: auto;
    }

    .results {
      > li {
        cursor: default;
        padding: 0.25em 0;
        &:last-child {
          padding-bottom: 0;
        }
      }
      .option {
        p {
          margin: 0;
        }
      }

      .percentage,
      .absolute {
        float: right;
        color: var(--primary-medium);
        margin-left: 0.25em;
      }

      .bar-back {
        background: var(--primary-low);
      }

      .bar {
        height: 0.75em;
        background: var(--primary-medium);
      }

      .chosen .bar {
        background: var(--tertiary);
      }
    }

    .pie-chart-legends {
      justify-content: center;
      text-align: center;
      margin-top: 0.5em;

      .legend {
        align-items: center;
        cursor: pointer;
        display: inline-flex;
        flex-direction: row;
        margin-left: 1em;
        font-size: var(--font-down-0);

        .swatch {
          margin-right: 0.5em;
          display: inline-block;
          height: 16px;
          width: 16px;
        }
      }
    }

    .poll-grouped-pies-controls {
      display: flex;
      justify-content: space-between;
    }

    .poll-results-chart {
      overflow-y: auto;
      overflow-x: hidden;
    }
  }

  &[data-poll-type="number"] {
    li[data-poll-option-id] {
      display: inline-block;
      width: 3.25em;
      margin-right: 0.25em;
    }
  }
}

.d-editor-preview {
  .poll {
    li[data-poll-option-id]:before {
      position: relative;
      vertical-align: baseline;
      border: 2px solid var(--primary);
      border-radius: 50%;
      display: inline-block;
      margin-right: 0.5em;
      width: 12px;
      height: 12px;
      content: "";
    }

    &[data-poll-type="multiple"] {
      li[data-poll-option-id]:before {
        border-radius: 3px;
      }
    }
  }
}

// hides 0 vote count in crawler and print view
body.crawler {
  .poll {
    .poll-info,
    .poll-button {
      display: none;
    }
  }
}