@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: 2;
  border: 1px solid var(--color-off-white);
  border-radius: var(--border-radius);
  box-shadow: var(--color-gray-dark) 0px 0px var(--lg-padding-y);
  align-items: center;
  text-align: center;
  font-weight: 600;
  padding: var(--md-padding-y);
  background-color: var(--color-white);
  bottom: var(--sm-padding-x);
  right: var(--sm-padding-x);
}

.pollingTitle {
  color: var(--color-white);
  white-space: nowrap;
  padding-bottom: var(--md-padding-y);
  padding-top: var(--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: 8.75em;
    }
    @include mq($ip678-portrait) {
      bottom: 4.75em;
    }
    @include mq($ip5-landscape) {
      bottom: 11.75em;
    }
    @include mq($ip678-landscape) {
      bottom: 1.75em;
    }
  }
}

.pollButtonWrapper {
  text-align: center;
  padding: var(--sm-padding-y);
}

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

.hidden {
  display: none;
}