// Styles used for showing content (or iframes) in a tablet or mobile device.
// Note: these are best used with bs4's embed-reponsive ratio classes.

.device-preview { // set device width (explicit or percentage) on this container
  position: relative;
  margin: auto;

  // Device Details
  &.device-preview-tablet, &.device-preview-mobile {
    border: 16px solid $white;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 24px;
    box-shadow: $box-shadow-sm;
    &::before, &::after {
      position: absolute;
      left: 50%;
      display: block;
      content: '';
      transform: translate(-50%, -50%);
      border: 1px solid $border-color;
    }
    &::before {
      top: -30px;
      width: 60px;
      height: 6px;
      border-radius: 3px;
    }
    &::after {
      bottom: -65px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
  }

  // Wrapping scrollable screen (used with embed-responsive ratio classes to get proper height -- set width on .device-preview container)
  .device-screen {
    width: 100%;
    background-color: $border-color;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  // For content that isn't an iframe
  .device-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}