@import "/imports/ui/stylesheets/variables/breakpoints";
@import "/imports/ui/components/modal/simple/styles";

.modal {
  @extend .modal;
  padding: var(--jumbo-padding-y);
  min-height: var(--min-modal-height);
  text-align: center;
}

.overlay {
  @extend .overlay;
}

.title {
  font-weight: var(--headings-font-weight);
  font-size: var(--font-size-large);
  color: var(--color-background);
  white-space: normal;
  padding-bottom: var(--md-padding-x);
}

.actionsbar,
.center,
.right {
  display: flex;
  flex-direction: row;
}

.right {
  flex: 1;
  justify-content: center;
  @include mq($small-only) {
    position: relative;
    right: 0;
    left: 0;
    display: contents;
  }
}

.center {
  flex: 1;
  justify-content: center;
}

.left,
.center,
.right {
  > * {
    margin: 0 var(--sm-padding-x);

    @include mq($small-only) {
      margin: 0 var(--sm-padding-y);
    }
  }
}

.left {
  display: inherit;
  flex: 0;
  @include mq($small-only) {
    bottom: var(--sm-padding-x);
    left: var(--sm-padding-x);
    right: auto;

    [dir="rtl"] & {
      left: auto;
      right: var(--sm-padding-x);
    }
  }
}

.right {
  position: absolute;
  right: var(--sm-padding-x);
  left: auto;

  [dir="rtl"] & {
    right: auto;
    left: var(--sm-padding-x);
  }
}

.mobileLayoutSwapped {
  @include mq($xsmall-only) {
    padding-right: var(--mobile-swap-offset);

    [dir="rtl"] & {
      padding-right: 0;
      padding-left: var(--mobile-swap-offset);
    }
  }
}

.quickPollBtn {
  padding: var(--whiteboard-toolbar-padding);
  background-color: var(--color-off-white) !important;
  box-shadow: none !important;

  span:first-child {
    border: 1px solid var(--toolbar-button-color);
    border-radius: var(--border-size-large);
    color: var(--toolbar-button-color);
    font-size: small;
    font-weight: var(--headings-font-weight);
    opacity: 1;
    padding-right: var(--border-size-large);
    padding-left: var(--border-size-large);
  }

  span:first-child:hover {
    opacity: 1 !important;
  }
}

.btn {
  span {
    box-shadow: none;
    background-color: transparent !important;
    border-color: var(--color-white) !important;
  }
}

.btn {
  z-index: 3;
}
.dropdown{
  z-index: 4;
}
.presentationItem {
  span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 15rem;

    @include mq($small-only) {
      max-width: 100%;
    }

  }
}

.isCurrent {
  i,
  span {
    color: var(--color-primary);
  }
}