@import (reference) "./../styles/variables/neptune-tokens.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";
@import (reference) "./../styles/less/ring.less";
@import (reference) "./../styles/less/core/_scaffolding.less";

.np-switch {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  overflow: hidden;
  width: 50px;
  padding: 2px;
  border-radius: 16px;
  user-select: none;
  cursor: pointer;

  .focus-ring();

  &--thumb {
    display: flex;
    transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;

    .tw-icon {
      color: #fff;
    }
  }

  &--unchecked {
    background: var(--color-interactive-secondary);

    .switch--thumb {
      transform: translateX(0);
    }
  }

  &--checked {
    background: var(--color-interactive-accent);

    .np-switch--thumb {
      .translateX(20px);
    }
  }

  &.disabled{
    .disabled();
  }
}

.np-theme-personal {
  .np-switch {
    padding: 1px 2px;

    &--checked {
      background: var(--color-interactive-primary);
    }
  }

  .np-switch--thumb {
    width: 20px;
    height: 20px;
    margin: 3px;
    border-radius: 50%;
    background-color: var(--color-background-screen);
  }
}