@import '../../src/scss/vars';
@import '../../src/scss/mixins';
@import '../../src/scss/animate';

.ymu-switch {
  position: relative;
  display: inline-block;
  width: $switch-width;
  height: $switch-height;
  background: $switch-default-clor;
  font-size: $switch-font-size;
  border: 1px solid $switch-border-color;
  border-radius: $switch-border-radius;
  box-sizing: content-box;
}

.ymu-switch__node {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: $switch-node-width;
  height: $switch-node-height;
  transition: .3s;
  border-radius: 100%;
  background-color: $switch-node-color;
  box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
}

.ymu-switch--on {
  background-color: $switch-active-color;
  .ymu-switch__node {
    transform: translateX($switch-width - $switch-node-width);
  }
}

.ymu-switch--disabled {
  opacity: $switch-disabled-opacity;
}