@import '../vars.less';
@import '../mixins/index.less';

.tdesign-mobile-demo-block {
  .button-demo {
    .t-button {
      margin-bottom: 16px;
    }
  }

  .tdesign-demo-iconfont {
    .tdesign-demo-icon {
      display: inline-block;
      width: 25%;
      text-align: center;

      .t-icon {
        font-size: 28px;
        color: inherit;
      }

      p {
        margin: 10px 0;
        .text-ellipsis();
      }
    }
  }

  .cell-base {
    background-color: #fbfbfb;
  }

  .tag-demo {
    display: flex;
    padding: 16px;
    background-color: #fff;

    .t-tag + .t-tag {
      margin-left: 16px;
    }
  }

  .tag-demo + .tag-demo {
    margin-top: 16px;
  }

  .segmented-control-demo {
    padding: 12px 16px;
    background-color: #fff;
  }

  .toast-demo,
  .message-demo,
  .dialog-demo,
  .action-sheet-demo {
    padding: 0 16px;

    > .t-button + .t-button {
      margin-top: 16px;
    }
  }

  .slider-demo {
    padding: 12px 16px;
    background-color: #fff;
  }

  .stepper-demo {
    background-color: #fff;
    // max-height: 69px;
  }

  .stepper-demo + .stepper-demo {
    margin-top: 16px;
  }

  .stepper-inline-demo .t-stepper {
    padding: 12px 16px;
  }

  .stepper-pure-demo {
    display: inline-block;
  }

  .step-demo {
    padding-top: 40px;
    padding-right: 12px;
    padding-left: 12px;
    background-color: #fff;

    .t-steps {
      padding-bottom: 40px;
    }
  }

  .step-demo + .step-demo {
    margin-top: 16px;
  }

  .badge-demo {
    display: flex;
    width: 100%;
    padding: 16px 0;

    .badge-item {
      width: 24%;
      text-align: center;
    }
  }
}