@import "../styles/base/fn.wxss";

.segment(@theme, @color) {
    &--@{theme} &__item {
    	color: @color;
    	border-color: @color;

    	&--current {
    		background: @color;
    		color: #fff;
    	}
    }
}

.@{wuxClassNamePrefix}-segment {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    min-height: 27px;
    opacity: 1;
    margin: 0 15px 15px;

    &--disabled {
    	opacity: .5;
    }

    &__item {
	    display: flex;
	    flex: 1;
	    justify-content: center;
	    align-items: center;
	    color: @balanced;
	    font-size: 14px;
	    line-height: 1;
	    transition: background .3s;
	    position: relative;
	    border: 1px solid @balanced;
	    width: 100%;
	    box-sizing: border-box;
	    border-left-width: 0;

	    &:first-child {
		    border-left-width: 1px;
		    border-radius: 5px 0 0 5px;
		}

		&:last-child {
		    border-radius: 0 5px 5px 0;
		}

		&--current {
		    background: @balanced;
		    color: #fff;
		}
	}

	.segment(light, @light-inverse);
    .segment(stable, @stable-inverse);
    .segment(positive, @positive);
    .segment(calm, @calm);
    .segment(assertive, @assertive);
    .segment(balanced, @balanced);
    .segment(energized, @energized);
    .segment(royal, @royal);
    .segment(dark, @dark);
}