// Imports Project Config File with wariables/mixins/functions
@import "../../assets/scss/config";

.es-switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 24px;
  input {
    display: none;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid es-color(green);
    transition: 0.4s;
    border-radius: 34px;

    &:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      border: 1px solid es-color(green);
      border-radius: 50%;
      transition: 0.4s;
    }
  }
  input:checked + .slider {
    background-color: es-color(green);
    &:before {
      background-color: $white;
    }
  }

  input:checked + .slider:before {
    transform: translateX(30px);
  }

  input:disabled + .slider {
    opacity: 0.5;
    filter: grayscale(100%);
  }

  .on {
    display: none;
  }
  .on {
    color: $white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 30%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
  }
  .off {
    color: es-color(green);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    right: 0%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
  }

  input:checked + .slider .on {
    display: block;
  }

  input:checked + .slider .off {
    display: none;
  }

  &.small {
    width: 27px;
    height: 12px;
    min-width: 27px;
    .slider {
      &:before {
        height: 9px;
        width: 9px;
        left: -1px;
        bottom: 0px;
      }
    }
    input:checked + .slider:before {
      transform: translateX(16px);
    }
    .on {
      color: transparent;
    }
    .off {
      color: transparent;
    }
  }
}