.igloo-detail-panel {
  .igloo-detail-panel-content {
    padding: 24px;
    background: #ffffff;
    box-shadow: inset 0px 3px 0px #5858ff;
    margin-top: 16px;

    .igloo-detail-panel-sub-title {
      padding-bottom: 16px;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      align-items: flex-start;

      .sub-title-icon {
        font-size: 24px;
        margin-right: 8px;
      }

      .sub-title-content {
        .sub-title-title {
          color: @black;
        }

        .sub-title-status {
          margin-top: 6px;
        }
      }
    }

    .igloo-detail-panel-item {
      &:not(:first-child) {
        margin-top: 16px;
      }

      .igloo-detail-panel-item-title {
        color:  @icon-color;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .igloo-detail-panel-item-value {
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }
}

.igloo-detail-panel-mobile {
  position: fixed;
  width: 100vw;
  max-height: 100vh;
  bottom: 0;
  left: 0;
  background: #fff;
  transition: height 0.3s ease;
  box-shadow: inset 0px 3px 0px #5858ff;
  z-index: 999;

  .igloo-detail-panel-title {
    position: relative;
    padding: 12px 16px;

    .igloo-detail-panel-arrow {
      position: absolute;
      top: 12px;
      right: 16px;
      font-size: 24px;
      color:  @icon-color;
      transition: opacity 0.3s ease;
    }
  }

  .igloo-detail-panel-content {
    padding: 16px;
    box-shadow: none;
    border-top: 1px solid #eeeeee;
    overflow: auto;
    max-height: calc(100vh - 48px);

    .igloo-detail-panel-sub-title {
      padding-bottom: 16px;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      align-items: flex-start;

      .sub-title-icon {
        font-size: 24px;
        margin-right: 8px;
      }

      .sub-title-content {
        .sub-title-title {
          color: @black;
        }

        .sub-title-status {
          margin-top: 6px;
        }
      }
    }

    .igloo-detail-panel-item {
      &:not(:first-child) {
        margin-top: 16px;
      }

      .igloo-detail-panel-item-title {
        color:  @icon-color;
        white-space: pre-wrap;
        word-break: break-all;
      }

      .igloo-detail-panel-item-value {
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }
}