#ccm-panel-detail-mobile-preview {
  > .ccm-panel-detail-content {
    background: $gray-500;
    text-align: center;

    > .ccm-device-preview {
      display: inline-block;
    }

  }

  iframe.ccm-display-frame {
    background: white;
    border: 0;
    box-shadow: inset 0 0 3px #000;
  }

  .ccm-device-orientation-portrait {
    .ccm-device-iphone13 {
      background: url($concrete-path + '/images/devices/iphone/iphone13.png') no-repeat;
      padding: 75px 38px 62px 39px;
    }

    .ccm-device-iphone6 {
      background: url($concrete-path + '/images/devices/iphone/iphone6.png') no-repeat;
      padding: 108px 28px;
    }

    .ccm-device-iphone6-plus {
      background: url($concrete-path + '/images/devices/iphone/iphone6plus.png') no-repeat;
      padding: 108px 28px;
    }

    .ccm-device-iphone5 {
      background: url($concrete-path + '/images/devices/iphone/iphone5.png') no-repeat;
      padding: 119px 33px;
    }

    .ccm-device-iphone4 {
      background: url($concrete-path + '/images/devices/iphone/iphone4.png') no-repeat;
      padding: 256px 56px;
    }

    .ccm-device-galaxys5 {
      background: url($concrete-path + '/images/devices/galaxy/s5.png') no-repeat;
      padding: 79px 26px;
    }

    .ccm-device-ipad {
      background: url($concrete-path + '/images/devices/ipad/ipad.png') no-repeat;
      padding: 112px 58px;
    }

  }

  .ccm-device-orientation-landscape {
    .ccm-device-iphone13 {
      background: url($concrete-path + '/images/devices/iphone/iphone13-landscape.png') no-repeat;
      padding: 38px 76px 38px 62px;
    }

    .ccm-device-iphone6 {
      background: url($concrete-path + '/images/devices/iphone/iphone6-landscape.png') no-repeat;
      padding: 28px 108px;
    }

    .ccm-device-iphone6-plus {
      background: url($concrete-path + '/images/devices/iphone/iphone6plus-landscape.png') no-repeat;
      padding: 28px 108px;
    }

    .ccm-device-iphone5 {
      background: url($concrete-path + '/images/devices/iphone/iphone5-landscape.png') no-repeat;
      padding: 33px 119px;
    }

    .ccm-device-iphone4 {
      background: url($concrete-path + '/images/devices/iphone/iphone4-landscape.png') no-repeat;
      padding: 56px 256px;
    }

    .ccm-device-galaxys5 {
      background: url($concrete-path + '/images/devices/galaxy/s5-landscape.png') no-repeat;
      padding: 26px 79px;
    }

    .ccm-device-ipad {
      background: url($concrete-path + '/images/devices/ipad/ipad-landscape.png') no-repeat;
      padding: 58px 112px;
    }

  }

}

#ccm-panel-page-devices {
  .panel-page-devices-title {
    color: $gray-700;
    font-weight: bold;
    margin-bottom: 0.25rem;
  }
}

div.ccm-menu-device-set {
  ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;

    li {
      margin: 0 0 5px;
      padding: 0;
    }

  }

  .ccm-device-select {
    text-align: left;

    .ccm-panel-device-name {
      font-weight: bold;

      .ccm-panel-device-name-label {
        display: inline-block;
        padding-left: 5px;
      }

      .ccm-panel-device-name-icon {
        display: inline-block;
        width: 5px;
      }

    }

    .ccm-panel-device-resolution {
      font-size: 12px;
      font-weight: 300;
    }

  }

}

@include color-mode(dark) {
  #ccm-panel-detail-mobile-preview {
    > .ccm-panel-detail-content {
      background: $gray-600;
    }
  }
}
