@charset "utf-8";
@import "./mixins/core";

// icon switch
.switch {
    $iconToggleSize: 30px;
    height: $iconToggleSize;
    width: $iconToggleSize * 2 - 10px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: #ccc;
    border-radius: $iconToggleSize / 2;
    overflow: hidden;
    z-index: 1;
    &::before {
        content: "";
        height: $iconToggleSize;
        width: $iconToggleSize * 2 - 10px;
        position: absolute;
        left: -$iconToggleSize * 2 + 10px;
        background-color: #099FDE;
        border-radius: $iconToggleSize / 2;
        transition: left 0.2s ease 0s;
        z-index: 2;
    }
    &::after {
        content: "";
        height: $iconToggleSize - 4px;
        width: $iconToggleSize - 4px;
        background-color: #fff;
        border-radius: $iconToggleSize / 2;
        position: absolute;
        left: 2px;
        top: 2px;
        transition: left 0.2s ease 0s;
        z-index: 3;
    }

    .text{
		position: absolute;
		left: 30px;
    	line-height: 30px;
    	z-index: 2;
    	color:#333;
	}

    &.active{
        &::before {
            left: 0;
        }
        &::after {
            left: $iconToggleSize - 8px;
        }
        .text{
			left:8px;
			color:#fff;
		}
    }
}