$backgroundColour: #C2CCD6;
$borderColour: #F8FBFC;


.gui-toggle-switch {
  appearance: none;
  background: transparent;
  border-color: transparent;
  border-radius: 60px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  height: 20px;
  left: 1px;
  outline: revert;
  outline-offset: unset;
  position: absolute;
  top: 1px;
  width: 32px;
  z-index: 1;

  .gui-size-small & {
    height: 18px;
    width: 28px;
  }

  &:checked:hover + .gui-toggle-switch__label {
    @apply bg-green-60;
  }

  &:not(:checked):hover {
    @apply border-blue-primary;
  }
}

.gui-toggle-switch + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
}

.gui-toggle-wrapper {
  display: flex;
  align-items: center;
  line-height: 0;

  &.gui-margin-large {
    margin: $layout-spacing-base*0.5 0;
  }

  &.gui-disabled {
   opacity: 0.5;
   pointer-events: none;
  }
}

.gui-toggle-wrapper--center {
  text-align: center;
}

.gui-toggle-wrapper__label,
.gui-toggle-wrapper__inner {
  position: relative;
  display: inline-block;
}

.gui-toggle-wrapper__label {
  font-size: 14px;

  &:first-of-type { margin-right: 10px; }
  &:last-of-type { margin-left: 10px; }
}

.gui-toggle-switch + label::after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 52px;
  transition: margin 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              background 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.gui-toggle-switch:checked + label::after {
  margin-left: 26px;
}

/* New switch */
.gui-toggle-switch + .gui-toggle-switch__label {
  padding: 2px;
  width: 34px;
  height: 22px;
  border: 2px solid $borderColour;
  background-color: $backgroundColour;
  border-radius: 60px;
  transition: background 0.4s;
  box-shadow: inset 0 0 2px rgb(0 0 0 / 10%);
}

.gui-toggle-switch + .gui-toggle-switch__label::before,
.gui-toggle-switch + .gui-toggle-switch__label::after {
  display: block;
  position: absolute;
  content: "";
}

.gui-toggle-switch + .gui-toggle-switch__label::after {
  top: 2px;
  left: 3px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 52px;
  transition: margin 0.2s cubic-bezier(0.4, 0, 1, 1),
              background 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.gui-toggle-switch:checked + .gui-toggle-switch__label::after {
  margin-left: 10px;
}

.gui-toggle-switch--inline + label {
  display: inline-block;
}

.gui-size-small {
  .gui-toggle-switch + .gui-toggle-switch__label {
    width: $layout-spacing-base + $layout-spacing-base*0.5;
    height: $layout-spacing-base;

    &::after {
      top: 2px;
      left: 2px;
      bottom: 4px;
      width: 12px;
      height: 12px;
    }
  }

  .gui-toggle-switch:checked + .gui-toggle-switch__label::after {
    margin-left: $layout-spacing-base*0.5;
  }

  .gui-toggle-wrapper__label {
    margin: 0 0 0 $layout-spacing-base*0.25;
  }

  .gui-toggle-wrapper__inner {
    max-height: $layout-spacing-base;
    min-width: 30px;
  }
}

.gui-is-checked {
  .gui-toggle-switch + .gui-toggle-switch__label {
    background-color: $primary-green;
  }
}

.gui-toggle-switch__label.gui-label-size-large {
  font-size: 1rem;
  margin: 0;
}

.gui-toggle-wrapper__label.gui-label-size-large {
  font-size: 1rem;
  margin: 0;
}