//
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@primary-color: #1890ff;
@error-color: #f24957;
@disabled-color: #999;
@hover-color: #345cfb;

input,
textarea {

	&.overLength,
	&.invalid {
		border-color: @error-color !important;
	}
}

//function
.f-fl {
	float: left;
}

.f-fr {
	float: right;
}

.f-csp {
	cursor: pointer;
}

.f-oa {
	overflow: auto;
}

.f-eps {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.f-vb {
	vertical-align: baseline;
}

// global
.g {

	&-ml {
		&-4 {
			margin-left: 4px;
		}

		&-6 {
			margin-left: 6px;
		}

		&-8 {
			margin-left: 8px;
		}

		&-10 {
			margin-left: 10px;
		}

		&-12 {
			margin-left: 12px;
		}

		&-16 {
			margin-left: 16px;
		}

		&-20 {
			margin-left: 20px;
		}

		&-24 {
			margin-left: 24px;
		}

		&-32 {
			margin-left: 32px;
		}

		&-40 {
			margin-left: 40px;
		}

		&-64 {
			margin-left: 64px;
		}
	}

	&-mr {
		&-4 {
			margin-right: 4px;
		}

		&-8 {
			margin-right: 8px;
		}

		&-12 {
			margin-right: 12px;
		}

		&-16 {
			margin-right: 16px;
		}

		&-20 {
			margin-right: 20px;
		}

		&-24 {
			margin-right: 24px;
		}

		&-32 {
			margin-right: 32px;
		}

		&-64 {
			margin-right: 64px;
		}
	}

	&-mt {
		&-4 {
			margin-top: 4px;
		}
		
		&-8 {
			margin-top: 8px;
		}

		&-10 {
			margin-top: 10px;
		}

		&-12 {
			margin-top: 12px;
		}

		&-16 {
			margin-top: 16px;
		}

		&-20 {
			margin-top: 20px;
		}

		&-24 {
			margin-top: 24px;
		}

		&-32 {
			margin-top: 32px;
		}
	}

	&-mb {
		&-8 {
			margin-bottom: 8px;
		}

		&-12 {
			margin-bottom: 12px;
		}

		&-16 {
			margin-bottom: 16px;
		}
	}

	&-flex {
		display: flex;

		&-jc {
			display: flex;
			justify-content: center;
		}

		&-ac {
			display: flex;
			align-items: center;
		}

		&-ae {
			display: flex;
			align-items: end;
		}

		&-center {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&-col {
			display: flex;
			flex-direction: column;
		}

		&-row {
			display: flex;
			flex-direction: row;
		}

		&-jsb {
			display: flex;
			justify-content: space-between;
		}

		&-jsa {
			display: flex;
			justify-content: space-around;
		}

		&-wrap {
			display: flex;
			flex-wrap: wrap;
		}
	}

	&-fs-0 {
		flex-shrink: 0;
	}

	&-text {
		font-size: 14px;
		letter-spacing: 0;

		&-light {
			font-weight: lighter;
		}

		&-medium {
			font-weight: normal;
		}

		&-semi {
			font-weight: bold;
		}

		&-bold {
			font-weight: 600;
		}

		&-default {
			color: #102048;
			line-height: 48px;
		}

		&-title {
			color: #102048;
			font-size: 16px;
			font-family: PingFangSC-Semibold;
			line-height: 48px;
		}

		&-disable {
			color: #a9a9b8;
		}

		&-error {
			font-size: 12px;
			color: @error-color;
		}

		&-noselect {
			user-select: none;
		}

		&-link {
			color: @primary-color;
			cursor: pointer;

			&:hover {
				color: @hover-color;
			}

			&.disabled,
			&.disabled:hover {
				cursor: not-allowed;
				color: #a9a9b8;
			}
		}

		&-center {
			text-align: center;
		}

		&-nowrap {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&-prenowrap {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			direction: rtl;
			text-align: left;
		}

		&-active {
			color: @primary-color;
		}

		&-12 {
			font-size: 12px;
		}

		&-16 {
			font-size: 16px;
		}

		&-18 {
			font-size: 18px;
		}

		&-24 {
			font-size: 24px;
		}

		&-28 {
			font-size: 28px;
		}

		&-green {
			color: green;
		}

		&-red {
			color: red;
		}
	}

	&-lh {
		&-20 {
			line-height: 20px;
		}

		&-24 {
			line-height: 24px;
		}

		&-32 {
			line-height: 32px;
		}

		&-48 {
			line-height: 48px;
		}
	}

	&-cursor {
		&-default {
			cursor: default;
			user-select: none;
		}

		&-pointer {
			cursor: pointer;
		}
	}

	&-hr {
		height: 1px;
		margin: 16px 0;
		border: 0;
		background-color: #c4c4c4;
	}

	&-split-line {
		width: 1px;
		height: 16px;
		background: #c4c4c4;
		margin: 0 16px;

		.small {
			height: 16px;
		}

		.large {
			height: 32px;
		}
	}
}

.g {
  /* Display up to n lines, with ellipsis for overflow, and title */
  &-max-line {
    .over-text{
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    &-1 {
      .over-text();
      -webkit-line-clamp: 1;
    }
    &-2 {
      .over-text();
      -webkit-line-clamp: 2;
    }
    &-3 {
      .over-text();
      -webkit-line-clamp: 3;
    }
    &-4 {
      .over-text();
      -webkit-line-clamp: 4;
    }
  }
}

.g{
	&-input {
		&-28{
			height: 28px;
			input{
				height: 28px;
			}
		}
	}
}
