:root {
  --poll-option-color: var(--muted-color);
  --poll-option-active-color: var(--secondary-color);
}

.ComposerBody-poll {
  margin-right: 15px;

  .PollLabel {
    font-size: 85%;
    font-weight: 600;
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: var(--border-radius);
    background: var(--body-bg);
    color: var(--control-color);
    text-transform: none;
    border: 1px solid var(--primary-color);

    &.none {
      background: transparent;
      border: 1px dotted var(--muted-color);
      color: var(--muted-color);
    }
  }
}

.PollDiscussionModal {
  .Form-group {
    margin-top: 5px;

    &.hide {
      display: none;
    }
  }

  input.FormControl {
    &:invalid {
      background-color: var(--alert-error-bg);
      color: var(--alert-error-color);
    }

    + .FormControl {
      margin-top: 5px;
    }
  }

  .PollModal--answers {
    margin-bottom: 20px;

    .Form-group {
      display: flex;
      margin-top: 2.5px;
      margin-bottom: 18px;
    }

    fieldset {
      flex-grow: 1;
    }
  }

  .PollModal--button {
    flex-shrink: 1;
    margin-left: 10px;
    text-align: right;

    .Button--color(@muted-color; darken(@control-bg, 5%));

    .icon {
      margin-right: 0;
      font-size: 12px;
    }

    &.small {
      padding: 2px 7px;
      float: right;
    }
  }

  .PollModal--date {
    display: flex;

    input {
      flex-grow: 1;
    }

    .Button {
      flex-shrink: 1;
      margin-left: 10px;
    }
  }

  .PollModal-SubmitButton {
    margin-top: 10px;
  }

  .PollModal-Button {
    margin-bottom: 15px;
  }

  .Checkbox.disabled {
    &, [disabled] {
      cursor: not-allowed;
    }

    opacity: 0.5;
  }
}

.Post-poll {
  .Post--hidden & {
    opacity: 0.5;
  }

  .PollOptions {
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(~"min(250px, 100%)", 1fr));
    column-gap: 30px;
    row-gap: 15px;
    margin-left: 15px;
    align-items: start;

    .PollAnswer when (@fof-polls-options-color-blend = true) {
      &-checkbox, &-text {
        & when (@config-dark-mode =true) {
          mix-blend-mode: difference;
        }

        & when (@config-dark-mode =false) {
          mix-blend-mode: darken;
        }
      }
    }
  }

  .Poll-sticky {
    position: sticky;
    bottom: 0;
    padding: 10px 0;
    margin-left: 15px;
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    column-gap: 15px;
    background-color: var(--body-bg);
    .box-shadow(inset 0px 2px 0px 0px var(--muted-more-bg));

    &:empty {
      display: none;
    }

    .PollInfoText {
      flex-grow: 1;
      margin-bottom: 0;
    }
  }

  & + & {
    margin-top: 2em;
  }

  .PollHeading {
    display: flex;
    align-items: baseline;
    gap: 10px;

    &-title {
      flex-grow: 1;
    }

    &-voters {
      .Button--color-auto('button-primary');
    }

    .Button {
      flex-shrink: 1;
      padding: 6px 10px;

      .icon {
        margin-right: 0;
      }
    }
  }
}

.PollOption {
  &, .PollBar {
    border-radius: 4px;
  }

  &:hover {
    background: var(--muted-more-bg);
  }

  /* Percent */
  .PollPercent {
    padding-right: 5px;
    font-size: 11px;
    font-weight: 600;

    &--option {
      color: var(--muted-color);
    }
  }

  .PollLabel {
    font-size: 85%;
    font-weight: 600;
    display: inline-block;
    padding: .1em .5em;
    border-radius: 4px;
    background: transparent;
    color: var(--muted-color);
    text-transform: none;
  }

  &:not(.Post--hidden &) {
    .PollBar::after {
      animation: slideInPollBackground 1s ease-in-out;
      transition: background-size 0.75s ease-in-out;
    }
  }

  .PollBar {
    padding: 10px;
    position: relative;
    border: 2px solid var(--poll-option-color);
    overflow: hidden;
    isolation: isolate;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-flow: row;
    gap: 10px;
    align-items: flex-start;

    .PollAnswer-checkbox {
      grid-column: 1;
      grid-row: 1;

      + .PollAnswer-text {
        grid-column: 2;
      }
    }

    .PollAnswer-text {
      grid-column: ~"1 / span 2";
      grid-row: 1;

      display: flex;
      column-gap: 5px;
      align-items: first baseline;

      &-answer {
        flex-grow: 1;
      }
    }

    .PollAnswer-image {
      grid-column: ~"1 / span 2";
      grid-row: 2;
      max-width: 100%;
    }

    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: -1;
      background-image: linear-gradient(
        to right,
        var(--poll-option-color) 0% 100%
      );
      background-size: var(--poll-option-width) 100%;
      background-repeat: no-repeat;
      content: '';
    }

    .PollAnswer {
      flex-grow: 1;
    }

    &[data-selected] {
      --poll-option-color: var(--poll-option-active-color);
    }
  }

  .PollAnswer-checkbox {
    margin-bottom: 0;
    position: relative;
    z-index: 2;

    input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      cursor: pointer;

      &:checked ~ .checkmark:after {
        display: block;
      }

      &[disabled] ~ .checkmark {
        cursor: not-allowed;
      }
    }

    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      border: 1px solid;
      border-radius: 4px;

      &:after {
        content: "";
        position: absolute;
        display: none;
        left: 6.75px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid var(--text-color);
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
      }
    }
  }
}

.VotesModal {
  &-list {
    display: grid;
    grid: auto-flow / repeat(auto-fill, minmax(150px, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    margin-bottom: 20px;

    a {
      color: var(--text-color);
      font-size: 15px;
      font-weight: bold;
      display: block;
      text-decoration: none;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;

      &:hover .username {
        text-decoration: underline;
      }
    }
    .Avatar {
      .Avatar--size(32px);
      vertical-align: middle;
      margin-right: 5px;
    }
  }

  h2 {
    margin-bottom: 15px;
  }

  h4 {
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 20px;
  }
}

.PublicPollButton {
  display: block;
  margin: 20px 15px;
}

.PollInfoText {
  span {
    display: block;
  }

  .icon {
    margin-right: 2.5px;
  }
}

@keyframes slideInPollBackground {
  from {
    background-size: 0 100%;
  }
  to {
    background-size: var(--poll-option-width) 100%;
  }
}