/**
 * 微信小程序不支持这种写法
 * :root {
 *   --tabbar-height: 100rpx
 * }
 */

/**
 * 外层容器
 */
.uni-app {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: white;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	
	/* padding-top: 0;
	padding-top: constant(safe-area-inset-top);  
	padding-top: env(safe-area-inset-top); */
	
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);  
	padding-bottom: env(safe-area-inset-bottom);
	
	.main-container {
		width: 100%;
		flex: 1;
		background-color: #F3F5FA;
		// height: calc(100% - var(--status-bar-height));
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
}

/**
 * app 状态栏
 */
.status-bar {
	width: 100%;
	height: var(--status-bar-height);
	// background: linear-gradient(90deg, #1CB4FF 0%, #1C5AFF 100%);
	background-color: $theme-color;
}

/**
 * 渐变背景色
 */
.linear-gradient {
	// background: linear-gradient(90deg, #1CB4FF 0%, #1C5AFF 100%);
	background-color: $theme-color;
}

/**
 * 白色按钮
 */
.white-btn {
	&.button-hover {
		background-color: unset !important;
	}
	color: white;
	font-size: 28rpx;
	padding: 16rpx 25rpx;
}

.footer-btn-group {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 120rpx;
	display: flex;
	align-items: center;
	background-color: white;
	box-shadow: 0px -2px 16px rgba(138, 138, 138, 0.2);
	padding: 20rpx 24rpx;
	overflow: auto;
	
	.button {
		width: 100%;
		height: 100%;
		color: white;
		letter-spacing: 3rpx;
		text-indent: 3rpx;
		font-size: $wk-font-base;
		background-color: $theme-color;
		border-radius: 16rpx;
		@include center;
	}
}

/**
 * filter-group
 */
.filter-group {
	width: 100%;
	height: 80rpx;
	background-color: white;
	margin-bottom: 15rpx;
}

/**
 * wk move button
 */
.wk-drag-btn {
	width: 100rpx;
	height: 100rpx;
	color: white;
	border-radius: 50%;
	background-color: $theme-color;
	box-shadow: 0 0 15rpx rgba(0,69,196,.5);
	flex-direction: column;
	@include center;
	
	.icon {
	  font-size: 42rpx;
	  line-height: 1.2;
	}
}

.wk-list-item {
	position: relative;
	width: 100%;
	background-color: white;
	padding: 28rpx 32rpx;
	&:after {
	  position: absolute;
	  bottom: 0;
	  left: 32rpx;
	  content: '';
	  width: calc(100% - 64rpx);
	  height: 1rpx;
	  border-bottom: 1rpx solid $border-color;
	  display: block;
	}
}

/**
 * popup 选项弹框
 */
.pop-wrapper {
	width: 500rpx;
	background-color: white;
	border-radius: 6rpx;
  overflow: hidden;
	.pop-item {
	  width: 100%;
	  height: 80rpx;
	  font-size: 28rpx;
	  line-height: 80rpx;
	  color: $dark;
	  padding-left: 50rpx;
	  &:active {
	    background-color: $main-bg;
	  }
	}
}

/**
 * 输入框 placeholder
 */
.wk-placeholder {
	color: #BBBBBB;
  font-size: 24rpx;
}

.wk-tabs {
  width: 100%;
  @include center;
  .wk-tab-item {
    position: relative;
    font-size: 30rpx;
		text-align: center;
    padding: 20rpx 0 20rpx;
    margin: 0 46rpx;
    overflow: hidden;
    &:after {
      position: absolute;
      left: 100%;
      bottom: 0;
      content: '';
      width: 100%;
      height: 6rpx;
      border-radius: 6rpx;
      background-color: $theme-color;
      display: block;
    }
    &.active {
			font-weight: 500;
			color: $theme-color;
      &:after {
        left: 0;
      }
    }
  }
}