@import './../../styles/_base';

$color-handle: $color-white;
$color-background: $color-grey;
$color-selected: $color-primary;

ngx-input-switch {
  display: inline-block;
  --color-handle: #{$color-handle};
  --color-background: #{$color-grey};
  --color-selected: #{$color-primary};
}

.ngx-input-switch {
  &__wrap {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 1px 0 1px 6px;
    overflow: visible;
    cursor: pointer;
  }

  &__label {
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
  }

  &__handle {
    position: absolute;
    top: 4px;
    left: 9px;
    width: 16px;
    height: 16px;
    background: $color-handle;
    background: var(--color-handle);
    border-radius: 100%;
    transition: left 0.15s ease-out;
  }

  &__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  &__background {
    position: relative;
    display: block;
    height: 22px;
    width: 39px;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    background: $color-background;
    background: var(--color-background);
    transition: 0.15s ease-out;
    transition-property: opacity background;
    border-radius: 11px;

    &::before,
    &::after {
      position: absolute;
      top: 50%;
      margin-top: -7px;
      line-height: 1;
      transition: inherit;
    }
  }
}

.ngx-input-switch__checked .ngx-input-switch__background {
  background: $color-selected;
  background: var(--color-selected);
}

.ngx-input-switch__checked .ngx-input-switch__background::before {
  opacity: 0;
}

.ngx-input-switch__checked .ngx-input-switch__background::after {
  opacity: 1;
}

.ngx-input-switch__checked .ngx-input-switch__handle {
  left: 26px;
}
