.Popup {
  --Popup-gap: var(--gap-l);

  background: var(--color-white);
  box-shadow: var(--shadow-4);
  display: none;
  left: var(--Popup-gap);
  max-height: calc(100vh - var(--Page-headerBottom) - var(--Popup-gap) * 2);
  overflow: auto;
  position: fixed;
  right: var(--Popup-gap);
  top: calc(var(--Page-headerBottom) + var(--Popup-gap));
  z-index: 100000;
}

.Popup-heading {
  background: var(--color-blue5);
  color: var(--color-white);
  display: block;
  line-height: var(--Icon-size);
  overflow: hidden;
  padding: var(--gap-m) calc(var(--gap-l) * 2 + var(--Icon-size)) var(--gap-m)
    var(--gap-l);
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;

  &:focus,
  &:hover {
    color: var(--color-white);
    text-decoration: underline;
  }

  &::before {
    .Icon;

    content: 'chevron_left';
    display: inline-block;
    margin-right: var(--gap-s);
    text-align: center;
    top: unset;
    width: var(--EIG-addSize);
  }
}

.Popup.is-ready {
  display: block;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--time-xs) var(--ease-in),
    transform var(--time-s) var(--ease-out);

  &.is-visible {
    opacity: 1;
    transform: none;
  }
}

.Popup:not(.is-visible) {
  z-index: -1;
}

.Popup-content {
  height: 100%;
  width: 100%;

  > .frame > form > .CIG {
    margin: calc(0px - var(--gap-l));
  }

  > .frame[name='DateStringCalendarFrame'] {
    padding: 0;
  }

  > .Popup-focus-trap {
    outline: none;
  }
}

.Popup [name='bulkEdit'] {
  .CIG-title {
    margin-bottom: var(--gap-l);
    padding: var(--gap-xs) var(--gap-s);
  }
}

.Popup[name='miscSearch'] {
  > .Popup-content {
    > .SearchWidget {
      overflow: auto scroll;
    }

    > .Popup-close {
      right: calc(var(--gap-l) - var(--gap-s) + var(--scrollbarSize));
    }
  }
}

.Popup[name='contentMetadata'] {
  .RCIG {
    margin-top: calc(var(--gap-xl) + var(--gap-m));

    .RCIG {
      margin-top: 0;
    }

    .RCIG-item:nth-last-child(2) {
      border-width: -1px;
    }
  }

  .RCIG-item {
    &.toggleVisible:not(.is-collapsed.collapsed) .objectInputs {
      display: flex;
      padding-bottom: 0;
    }

    .repeatableForm {
      display: flex;
      flex-direction: column;
      gap: var(--gap-m);
      padding-left: var(--gap-m);
      padding-top: var(--gap-m);

      .metadataEntryWrapper {
        span.displayKey {
          color: var(--color-gray5);
          display: block;
          font-size: var(--fontSize-xs);
        }

        span.displayValue {
          color: var(--color-black);
        }
      }
    }
  }

  .RCIG-title {
    &::before {
      .Icon;

      content: 'expand_less';
    }
  }
}

.Popup[name='profileDropdown'] {
  right: var(--Popup-gap) !important;
}

.Popup[name='edit-guide'] {
  .removeButton,
  .addButtonContainer {
    display: none;
  }
}

@media (@mq-m) {
  .Popup[name='miscSearch'] {
    > .Popup-content {
      > .SearchWidget {
        overflow: visible;
      }

      > .Popup-close {
        right: calc(var(--gap-l) - var(--gap-s));
      }
    }
  }
}

.Popup[name='workStream'] .Popup-content > .frame > form > .CIG {
  margin-bottom: 0;
}

.Popup .Widget[name='bulkArchive'] .CIG {
  margin: unset;
  padding-bottom: var(--CIG-padding);
  padding-top: calc(var(--CIG-padding) - var(--Widget-padding));
}

.Popup-close {
  .IconButton;

  --IconButton-name: 'close';

  left: calc(
    var(--Tether-rl) + var(--Tether-rw) - var(--gap-l) - var(--gap-s) -
      var(--Icon-size)
  );
  position: fixed;
  top: calc(var(--Tether-rt) + ((var(--gap-m) - var(--gap-s)) / 2));
  z-index: 11;

  &::before {
    padding: 0;
  }
}

.Popup-close.is-hidden {
  display: none;
}

// Hide close button on popups with full-width blue "Back" bar
.Popup[name='diff'] > .Popup-content > .Popup-close,
.Popup-heading ~ .Popup-close {
  display: none;
}

.Popup.is-local {
  &[data-tether-ry='t'] {
    max-height: calc(
      100vh - var(--Tether-rt) - var(--Tether-rh) - var(--Popup-gap)
    );
  }

  &[data-tether-ry='b'] {
    max-height: calc(100vh - var(--Page-headerBottom) - var(--Popup-gap));
  }
}

.Popup.is-noGap,
.Popup[name='misc'] {
  bottom: var(--Page-bottom);
  left: 0;
  right: var(--Page-right);
  top: var(--Page-headerBottom);
}

.Popup.is-fromTop {
  bottom: var(--Page-bottom);
  max-height: none;
  top: var(--Page-headerBottom);
  transform: scaleY(0);
  transform-origin: top;
}

.Popup.is-fromBottom {
  bottom: var(--Page-bottom);
  max-height: none;
  transform: scaleY(0);
  transform-origin: bottom;
}

.Popup.is-fromLeft {
  left: 0;
  right: calc(var(--Page-right) + var(--Popup-gap));
  transform: scaleX(0);
  transform-origin: left;
}

.Popup.is-fromRight {
  left: var(--Popup-gap);
  right: var(--Page-right);
  transform: scaleX(0);
  transform-origin: right;
}

.Popup.is-calendar {
  &[data-tether-rx][data-tether-ry] > .Popup-content {
    max-height: none;
    max-width: 320px;
    min-height: 0;
    min-width: 280px;
    overflow: auto;
    padding: calc(var(--gap-m) - var(--gap-s)) var(--gap-l) var(--gap-l)
      var(--gap-l);
    position: relative;
    width: calc(100vw - var(--Popup-gap) * 2);

    > .Calendar {
      position: relative;
      z-index: 1;
    }
  }
}

.Popup-content > .Widget:first-child,
.Popup-content > .frame > .Widget:first-child {
  > .Widget-controls {
    margin-right: calc(var(--gap-l) + var(--Icon-size));
  }
}

.Popup.is-visible.is-fromBottom
  ~ .Popup.is-visible.is-fromBottom
  .Popup-content {
  box-shadow: none;
}

.Popup .ActionBar {
  justify-content: flex-start;

  .Button {
    width: auto;

    &:not(:first-child) {
      margin-left: var(--gap-l);
    }
  }
}

.SiteSearchTermAnalytics-controls {
  height: auto;
  left: unset;
  position: relative;
  right: unset;
  top: unset;
  z-index: auto;
}

.SiteSearchTermAnalytics-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  .DT {
    &:extend(.Link.is-blue all);

    border-top: 1px solid var(--color-gray2);
  }
}

@media (@mq-s) {
  .Popup {
    --Popup-gap: var(--gap-xl);

    left: calc((100% - var(--Page-right)) * 0.2);
    right: calc((100% - var(--Page-right)) * 0.2 + var(--Page-right));
  }

  .Popup.is-fromLeft {
    bottom: calc(var(--Page-bottom) + var(--Popup-gap));
    right: calc((100% - var(--Page-right)) * 0.2);
  }

  .Popup.is-fromRight {
    bottom: calc(var(--Page-bottom) + var(--Popup-gap));
    left: calc((100% - var(--Page-right)) * 0.2);
  }

  .Popup.is-local {
    transform: scaleY(0);

    > .Popup-content {
      min-width: 40vw;
    }

    &[data-tether-rx='l'] {
      left: var(--Tether-rl) /*rtl:ignore*/;
      right: auto /*rtl:ignore*/;

      > .Popup-content {
        max-width: calc(100vw - var(--Tether-rl) - var(--Popup-gap));
      }
    }

    &[data-tether-rx='r'] {
      left: auto /*rtl:ignore*/;
      right: calc(100vw - var(--Tether-rl) - var(--Tether-rw)) /*rtl:ignore*/;

      > .Popup-content {
        max-width: calc(var(--Tether-rl) + var(--Tether-rw) - var(--Popup-gap));
      }
    }

    &[data-tether-ry='t'] {
      bottom: auto;
      top: calc(var(--Tether-rt) + var(--Tether-rh));
      transform-origin: top;

      > .Popup-content {
        max-height: calc(
          100vh - var(--Tether-rt) - var(--Tether-rh) - var(--Popup-gap)
        );
      }
    }

    &[data-tether-ry='b'] {
      bottom: calc(100vh - var(--Tether-rt));
      top: auto;
      transform-origin: bottom;

      > .Popup-content {
        max-height: calc(
          var(--Tether-rt) - var(--Page-headerBottom) - var(--Popup-gap)
        );
      }
    }
  }
}

@media (@mq-m) {
  .Popup.is-local {
    max-width: 45vw;
  }
}

@media (@mq-l) {
  .Popup.is-fromLeft {
    right: calc((100% - var(--Page-right)) * 0.3 + var(--Page-right));
  }

  .Popup.is-fromRight {
    left: calc((100% - var(--Page-right)) * 0.3);
  }

  .Popup.is-calendar[data-tether-rx][data-tether-ry] > .Popup-content {
    max-width: 400px;
  }
}
