.toggle {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #464646;
  border-radius: 4px;
  width: 5rem;
  height: 2.5rem;

  & .btn,
  & .label {
    height: 2.188rem;
    width: 2.188rem;
    margin: 0.125rem;
  }

  & .label {
    padding-top: 4px;
    text-align: center;
  }

  & .btn {
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05);
    border-radius: 3px;
  }

  &.on {
    background: #38C647;
    border: 1px solid #23AC32;

    & .label {
      float: right;
      color: #FFFFFF;
    }

    & .btn {
      float: left;
    }
  }

  &.off {
    background: #E6E6E6;
    border: 1px solid #D8D8D8;

    & .label {
      float: left;
    }

    & .btn {
      float: right;
    }
  }
}