@import "var";

.@{prefixName}-select{
  width: 100%;
  font-size: 0;
  &__header{
    width: 100%;
    height: @select-header-height;
    background-color: @select-header-background-color;
		display: flex;
		align-items: center;
		font-size: @select-text-size;
	}
	&__main{
		flex-grow: 1;
		height: 100%;
		display: flex;
	}

	&__option{
		height: 100%;
		width: 0;
		flex-grow: 1;
		box-sizing: border-box;
		padding: @select-cell-padding;
		.flex(@align-items: center, @justify-content: center);
		&.tea-select__option--search{
			flex-grow: 0;
			width: 33.333%;
		}
	}
	&__cell{
		max-width: 100%;
		display: flex;
		align-items: center;
	}
	&__value{
		flex-grow: 1;
		.text-ellipsis();
	}

	&__arrowdown{
		flex-grow: 0;
		flex-shrink: 0;
		// transition: transform .3s ease;
		&.is-active{
			transform: rotate(180deg);
			transform-origin: center;
		}
	}
	&__search{
		flex-grow: 0;
		flex-shrink: 0;
		margin: @search-drop-search-margin;
	}


	&__body{
		position: relative;
		overflow: hidden;
	}
	&__mask{
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99;
		opacity: 0;
		transition-property: opacity;
		transition-duration: .2s;
		transition-timing-function: ease;
		&.is-show{
			opacity: 1;
		}
	}
	&__wrap{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 100;
		width: 100%;
		overflow: hidden;
	}
	&__container{
		transform: translate3d(0, -100%, 0);
		transition: transform .2s ease;
		&.is-show{
			transform: translate3d(0, 0, 0);
		}
	}
	&__slot-body{
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
	}
}