@use '../style/mixins' as *;
@use '../style/variables' as *;
@use '../theme/theme-mode-variables' as *;

:root{
  --switch-width: 32px;
  --switch-padding: 2px;
  --switch-handle-width: (var(--switch-width) / 2);
}

.p-inputswitch-container {
  display: flex;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}

.p-inputswitch {
  height: 1.45em;
  width: 36px;
  vertical-align: middle;

  &.small {
    width: var(--switch-width);
  }
}

.p-inputswitch-label {
  padding-left: 10px;
}

.p-inputswitch-slider {
  background-color: $input-switch-default-bg-color;
  transition: .3s;
  border-radius: 30px;

  &:before {
    transition: 0.2s;
    transform: translateY(-50%);

    background-color: #ffffff;
    height: 1.14em;
    width: 1.14em;
    left: var(--switch-padding);
    border-radius: 50%;
    box-shadow: 1px 1px 3px rgba(0,0,0,.15);
  }

  // Hover style
  .p-inputswitch-focus &,
  .p-inputswitch:not(.p-disabled):hover &{
    background-color: $input-switch-default-bg-color;
  }

  // Selected
  .p-inputswitch-checked &{
    background-color: $input-switch-active-bg-color;
    border-color: $input-switch-active-bg-color;

    &::before{
      background-color: #fff;
      left: calc(100% - var(--switch-handle-width) - var(--switch-padding));
    }
  }

  // Selected hover style
  .p-inputswitch-checked:not(.p-disabled):hover &,
  .p-inputswitch-checked.p-inputswitch-focus &{
    background-color: $input-switch-active-hover-bg-color;
    border-color: $input-switch-active-hover-bg-color;
  }
}
