/// _objecs.box.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2; fill-column: 80 -*-

$pf-box-width--small: $inuit-global-line-height * 2;

.o-box {
  position: relative;

  img {
    max-width: 100%;
  }
}

.o-box--large-height {
  max-height: $inuit-global-line-height * 12;
  overflow: auto;

  @include mq($until: mobile) {
    max-height: $inuit-global-line-height * 12;
    padding: quarter($spacing-unit);
  }
}

.o-box--inverted {
  background-color: $pf-background;
}

.o-box--highlight {
  border-left: 8px solid $pf-color-primary;
  > .layout {
    transform: translateX(-8px);
  }
}

.o-box--overlook {
  background-color: $pf-background;
  background-image: repeating-linear-gradient(-45deg,
                                              $pf-background,
                                              $pf-background 2px,
                                              transparent 2px,
                                              transparent 4px);
  opacity: 0.7;
}

.o-box--overlap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
