@import "../_mixins.less";

:host {
  --switch-width: 32px;
  --switch-size: 16px;
  --bar-height: 10px;
}

:host {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5em;
}

.bk-icon {
  position: relative;
  width: var(--switch-size);
  height: var(--switch-size);
  .icon-mask-base();
}

.bk-body {
  position: relative;
  width: var(--switch-width);
  height: var(--switch-size);
  cursor: pointer;
}

:host(.bk-disabled) {
  cursor: default;
}

.bk-bar {
  position: relative;
  top: calc(50% - var(--bar-height)/2);
  height: var(--bar-height);
  border-radius: calc(var(--bar-height)/2);
  background-color: var(--inactive-bg);
  transition-property: background-color;
}

.bk-knob {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--switch-size);
  height: var(--switch-size);
  border-radius: 8px;
  background-color: var(--inactive-fg);
  transition-property: left, background-color;
}

:host(.bk-active) .bk-bar {
  background-color: var(--active-bg);
}

:host(.bk-active) .bk-knob {
  left: calc(100% - var(--switch-size));
  background-color: var(--active-fg);
}
