// iPhone X
$device-silver: #e2e3e4;
$device-silver-dark: darken($device-silver, 10%);
$device-silver-panel: #222;

.device-iphone-x {
  --scale-factor: 1;
  --device-height: calc(868px * var(--scale-factor));
  --device-width: calc(428px * var(--scale-factor));
  --frame-padding: calc(28px * var(--scale-factor));
  --video-height: calc(var(--device-height) - 2 * var(--frame-padding));
  --video-width: calc(var(--device-width) - 2 * var(--frame-padding));
  height: var(--device-height);
  width: var(--device-width);
  position: relative;
  margin: auto;
  margin-bottom: 1rem;

  .device-frame {
    background: $device-silver-panel;
    border-radius: calc(68px * var(--scale-factor));
    box-shadow: inset 0 0 2px 2px $device-silver-dark,
      inset 0 0 0 7px $device-silver;
    height: var(--device-height);
    padding: var(--frame-padding);
    width: var(--device-width);
  }

  // 2436-by-1125-pixel resolution
  .device-content {
    border-radius: calc(40px * var(--scale-factor));
    height: var(--video-height);
    width: var(--video-width);
    overflow: hidden;
  }

  .device-header {
    background: $device-silver-panel;
    border-bottom-left-radius: calc(20px * var(--scale-factor));
    border-bottom-right-radius: calc(20px * var(--scale-factor));
    height: calc(30px * var(--scale-factor));
    left: 50%;
    margin-left: calc(-102px * var(--scale-factor));
    position: absolute;
    top: calc(28px * var(--scale-factor));
    width: calc(204px * var(--scale-factor));

    &::after,
    &::before {
      content: '';
      height: calc(10px * var(--scale-factor));
      position: absolute;
      top: 0;
      width: calc(10px * var(--scale-factor));
    }
    &::after {
      background: radial-gradient(
        circle at bottom left,
        transparent 0,
        transparent 75%,
        $device-silver-panel 75%,
        $device-silver-panel 100%
      );
      left: calc(-10px * var(--scale-factor));
    }
    &::before {
      background: radial-gradient(
        circle at bottom right,
        transparent 0,
        transparent 75%,
        $device-silver-panel 75%,
        $device-silver-panel 100%
      );
      right: calc(-10px * var(--scale-factor));
    }
  }

  .device-sensors {
    &::after,
    &::before {
      content: '';
      position: absolute;
    }
    &::after {
      background: #444;
      border-radius: calc(3px * var(--scale-factor));
      height: calc(6px * var(--scale-factor));
      left: 50%;
      margin-left: calc(-25px * var(--scale-factor));
      top: calc(32px * var(--scale-factor));
      width: calc(50px * var(--scale-factor));
    }
    &::before {
      background: #444;
      border-radius: 50%;
      height: calc(14px * var(--scale-factor));
      left: 50%;
      margin-left: calc(40px * var(--scale-factor));
      top: calc(28px * var(--scale-factor));
      width: calc(14px * var(--scale-factor));
    }
  }

  .device-btns {
    background: $device-silver-dark;
    height: calc(32px * var(--scale-factor));
    left: calc(-3px * var(--scale-factor));
    position: absolute;
    top: calc(115px * var(--scale-factor));
    width: calc(3px * var(--scale-factor));

    &::after,
    &::before {
      background: $device-silver-dark;
      content: '';
      height: calc(62px * var(--scale-factor));
      left: 0;
      position: absolute;
      width: calc(3px * var(--scale-factor));
    }

    &::after {
      top: calc(60px * var(--scale-factor));
    }
    &::before {
      top: calc(140px * var(--scale-factor));
    }
  }

  .device-power {
    background: $device-silver-dark;
    height: calc(100px * var(--scale-factor));
    right: calc(-3px * var(--scale-factor));
    position: absolute;
    top: calc(200px * var(--scale-factor));
    width: calc(3px * var(--scale-factor));
  }
}