@import "../../stylesheets/variables/_all";

$poll-width: 18rem;
$max-btn-width: 9em;
$col-amount: 2;

// pollingAnswer position offsets
$xs-portrait-offset: 8.75em;
$xs-landscape-offset: 4.75em;
$s-portrait-offset: 11.75em;
$s-landscape-offset: 1.75em;

.pollingContainer {
  width: $poll-width;
  position: absolute;
  z-index: 1015;
  border: 1px solid $color-off-white;
  border-radius: $border-radius;
  ////
  box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.25);
  align-items: center;
  text-align: center;
  font-weight: 600;
  padding: $md-padding-y;
  background-color: $color-white;
  bottom: $sm-padding-x;
  right: $sm-padding-x;
}

.pollingTitle {
  color: $color-text;
  white-space: nowrap;
  padding-bottom: $md-padding-y;
  padding-top: $md-padding-y;
}

.pollingAnswers {
  display: grid;
  grid-template-columns: repeat($col-amount, 1fr);

  > pollButtonWrapper:nth-child(odd) {
      grid-column: 1;
  }

  > pollButtonWrapper:nth-child(even) {
      grid-column: $col-amount;
  }

  z-index: 1;

  :global(.browser-safari) & {
    @include mq($ip5-portrait) {
      bottom: $xs-portrait-offset;
    }
    @include mq($ip678-portrait) {
      bottom: $s-portrait-offset;
    }
    @include mq($ip5-landscape) {
      bottom: $xs-landscape-offset;
    }
    @include mq($ip678-landscape) {
      bottom: $s-landscape-offset;
    }
  }
}

.pollButtonWrapper {
  text-align: center;
  padding: $sm-padding-y;
}

.pollingButton {
  width: 100%;
  max-width: $max-btn-width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hidden {
  display: none;
}