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

.container {
  order: 1;
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
}

.content {
  display: flex;
  align-self: stretch;
  flex: 3;
  align-items: center;
  justify-content: center;
  overflow: auto;
  width: 100%;
  position: relative;
}

.overlay {
  flex: 1;
  display: flex;
  order: 1;
  width: 100%;
  border: 5px solid transparent;
  border-top: 0 !important;
  position: relative;

  @include mq($medium-up) {
    border: 10px solid transparent;
  }
}

.hideOverlay {
  display: none;
}

.floatingOverlay {
  --overlay-width: 20vw;
  --overlay-min-width: 235px;
  --overlay-max-width: 20vw;
  --overlay-ratio: calc(16 / 9);

  @include mq($medium-up) {
    z-index: 999;
    position: fixed;
    margin: 0;
    bottom: .8rem;
    right: .8rem;
    width: var(--overlay-width);
    min-width: var(--overlay-min-width);
    max-width: var(--overlay-max-width);
    height: calc(var(--overlay-width) / var(--overlay-ratio));
    min-height: calc(var(--overlay-min-width) / var(--overlay-ratio));
    max-height: calc(var(--overlay-max-width) / var(--overlay-ratio));
  }
}