/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

:root {
  --switcher-color: #a8abb5;
  --switcher-color-primary: var(--color-primary);
  --switcher-color-info: var(--color-info);
  --switcher-color-success: var(--color-success);
  --switcher-color-danger: var(--color-danger);
  --switcher-color-warning: var(--color-warning);
  --switcher-transition-duration: calc(var(--transition-duration) * 1.5);
  --switcher-disabled-opacity: 0.6;
  --switcher-dot-color: #fff;
  --switcher-shadow-color: color-mod(#212121 alpha(50%));
  --switcher-outline-color: color-mod(var(--switcher-color) alpha(30%));
}

.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: flex-start;
  max-width: 100%;
  padding: calc(var(--space) / 2) 0;
}

.label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.fill {
  width: 100%;

  & .label,
  & .labelText,
  & .hint {
    width: 100%;
  }
}

.left {
  & .labelText {
    margin-left: var(--space);
  }

  & .hint {
    padding-left: calc(var(--space) + var(--switcher-width));
  }

  & .label {
    flex-direction: row;
  }
}

.right {
  & .labelText {
    margin-right: var(--space);
  }

  & .hint {
    padding-right: calc(var(--space) + var(--switcher-width));
  }

  & .label {
    flex-direction: row-reverse;
  }
}

.switcher {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--switcher-width);
  height: var(--switcher-height);
  user-select: none;
  transition: background var(--switcher-transition-duration) ease,
    box-shadow var(--switcher-transition-duration) ease;
  border-radius: var(--switcher-border-radius);
  transform: translateZ(0);
  flex: 0 0 auto;
  cursor: pointer;
  border: var(--switcher-border-size) solid var(--switcher-color);

  &:before {
    position: absolute;
    top: 0;
    left: calc(((var(--switcher-height) - var(--switcher-dot-size)) / 2) * -1);
    display: block;
    width: var(--switcher-dot-size);
    height: var(--switcher-dot-size);
    content: '';
    transition: transform var(--switcher-transition-duration) ease;
    transform: translateZ(0)
      translateX(calc((var(--switcher-height) - var(--switcher-dot-size)) / 2));
    border-radius: 100%;
    background-color: var(--switcher-dot-color);
    box-shadow: 0 1px 4px 0 var(--switcher-shadow-color);
  }
}

.input {
  position: absolute;
  left: -9999px;
  opacity: 0;

  &:checked + .switcher {
    background-color: var(--switcher-color);

    &:before {
      transform: translateX(var(--switcher-active-offset));
    }
  }

  &:focus + .switcher,
  &:active + .switcher {
    box-shadow: 0 0 0 var(--switcher-outline-width)
      var(--switcher-outline-color);
  }

  &:disabled + .switcher,
  &:disabled + .switcher + .labelText {
    cursor: not-allowed;
    opacity: var(--switcher-disabled-opacity);
  }
}

.labelText,
.hint {
  position: relative;
  box-sizing: border-box;
  user-select: none;
}

/* Sizes */
.small {
  --switcher-width: 30px;
  --switcher-height: 20px;
  --switcher-outline-width: 2px;
  --switcher-border-size: 2px;
  --switcher-border-radius: calc(var(--switcher-height) / 2);
  --switcher-dot-size: 16px;
  --switcher-active-offset: calc(
    var(--switcher-width) - var(--switcher-dot-size) -
      ((var(--switcher-height) - var(--switcher-dot-size)) / 2)
  );

  & .hint {
    margin-top: calc(var(--space-small) / 4);
  }
}

.normal {
  --switcher-width: 39px;
  --switcher-height: 26px;
  --switcher-outline-width: 3px;
  --switcher-border-size: 2px;
  --switcher-border-radius: calc(var(--switcher-height) / 2);
  --switcher-dot-size: 22px;
  --switcher-active-offset: calc(
    var(--switcher-width) - var(--switcher-dot-size) -
      ((var(--switcher-height) - var(--switcher-dot-size)) / 2)
  );

  & .hint {
    margin-top: calc(var(--space-small) / 3);
  }
}

.large {
  --switcher-width: 48px;
  --switcher-height: 32px;
  --switcher-outline-width: 3px;
  --switcher-border-size: 2px;
  --switcher-border-radius: calc(var(--switcher-height) / 2);
  --switcher-dot-size: 28px;
  --switcher-active-offset: calc(
    var(--switcher-width) - var(--switcher-dot-size) -
      ((var(--switcher-height) - var(--switcher-dot-size)) / 2)
  );

  & .hint {
    margin-top: calc(var(--space-large) / 4);
  }
}

/* Intents */
.default {
  --switcher-color: #a8abb5;
  --switcher-outline-color: color-mod(#a8abb5 alpha(30%));
}

.primary {
  --switcher-color: var(--color-primary);
  --switcher-outline-color: color-mod(var(--color-primary) alpha(30%));
}

.info {
  --switcher-color: var(--color-info);
  --switcher-outline-color: color-mod(var(--color-info) alpha(30%));
}

.success {
  --switcher-color: var(--color-success);
  --switcher-outline-color: color-mod(var(--color-success) alpha(30%));
}

.danger {
  --switcher-color: var(--color-danger);
  --switcher-outline-color: color-mod(var(--color-danger) alpha(30%));
}

.warning {
  --switcher-color: var(--color-warning);
  --switcher-outline-color: color-mod(var(--color-warning) alpha(30%));
}