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

@import '../../styles/variables.css';

:root {
  --switcher-width: 32px;
  --switcher-height: 20px;
  --switcher-border-radius: calc(var(--switcher-height) / 2);
  --switcher-dot-size: 16px;
  --switcher-background-color: #b8b8b8;
  --switcher-active-background-color: #ccc;
  --switcher-checked-background-color: #4cd964;
  --switcher-checked-active-background-color: #59ee72;
  --switcher-dot-color: #fff;
  --switcher-active-dot-color: #f6fff7;
  --switcher-transition-duration: var(--default-transition-duration);
  --switcher-label-font-family: var(--default-font-family);
  --switcher-label-font-size: 15px;
  --switcher-active-offset: calc(
    var(--switcher-width) - var(--switcher-dot-size) -
      ((var(--switcher-height) - var(--switcher-dot-size)) / 2)
  );
  --switcher-danger-background-color: var(--color-danger);
  --switcher-danger-active-background-color: color-mod(
    var(--color-danger) lightness(+8%)
  );
  --switcher-hint-font-size: var(--default-font-size-small);
  --switcher-hint-color: #aaa;
  --switcher-hint-font-family: var(--switcher-label-font-family);
  --switcher-description-font-family: var(--switcher-label-font-family);
  --switcher-description-font-size: var(--default-font-size-small);
  --switcher-description-line-height: 1.3;
}

.wrapper {
  line-height: 0;
}

.container {
  all: initial;
  display: inline-flex;
  flex-direction: row;
  box-sizing: border-box;
  height: var(--switcher-height);
  vertical-align: middle;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  max-width: 100%;

  &:hover {
    & .switcher {
      background-color: var(--switcher-active-background-color);

      &::before {
        background-color: color-mod(var(--switcher-dot-color) alpha(98%));
        box-shadow: 0 2px 2px 0 color-mod(#000 alpha(30%));
      }
    }

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

.danger {
  &.checked {
    & .switcher {
      background-color: var(--switcher-danger-background-color) !important;
    }

    &:hover {
      & .switcher {
        background-color: var(
          --switcher-danger-active-background-color
        ) !important;
      }
    }
  }
}

.input {
  display: none;
}

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

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

  &:active {
    background-color: var(--switcher-active-background-color);

    &::before {
      background-color: var(--switcher-active-dot-color);
      box-shadow: 0 1px 0 0 color-mod(#000 alpha(30%));
    }
  }
}

.disabled {
  cursor: not-allowed;
  opacity: 0.7;

  & .switcher {
    cursor: not-allowed;
    background-color: var(--switcher-background-color) !important;

    &::before {
      background-color: var(--switcher-dot-color);
      box-shadow: none !important;
    }
  }

  & .label {
    cursor: not-allowed;
  }

  &.checked {
    & .switcher {
      background-color: var(--switcher-checked-background-color) !important;
    }

    &.danger {
      & .switcher {
        background-color: var(--switcher-danger-background-color) !important;
      }
    }
  }

  &:hover {
    & .switcher {
      background-color: var(--switcher-background-color) !important;
    }

    &.checked {
      & .switcher {
        background-color: var(--switcher-checked-background-color) !important;
      }

      &.danger {
        & .switcher {
          background-color: var(--switcher-danger-background-color) !important;
        }
      }
    }
  }
}

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

    &::before {
      left: var(--switcher-active-offset);
      background-color: var(--switcher-active-dot-color);
    }

    /*&:hover {
      background-color: var(--switcher-checked-active-background-color);
    }*/
  }
}

.label {
  display: inline;
  padding-left: 14px;
  cursor: pointer;
  user-select: none;
  font-family: var(--switcher-label-font-family);
  font-size: var(--switcher-label-font-size);
  @mixin text-overflow-ellipsis;

  & b,
  & strong {
    font-weight: 500;
  }
}

.hint {
  font-family: var(--switcher-hint-font-family);
  padding-top: 6px;
  padding-left: 46px;
  cursor: default;
  user-select: none;
  font-size: var(--switcher-hint-font-size);
  line-height: 1.3;
  color: var(--switcher-hint-color);
}

.description {
  display: block;
  font-family: var(--switcher-description-font-family);
  font-size: var(--switcher-description-font-size);
  line-height: var(--switcher-description-line-height);
  margin-bottom: calc(var(--default-padding) / 2);
}