@layer ui.input {
  .root {
    cursor: var(--custom-cursor, pointer);

    position: relative;

    display: flex;
    flex-shrink: 0;
    align-items: center;

    width: 1.875rem;
    height: 0.875rem;
  }

  .input {
    cursor: inherit;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    margin: 0;

    opacity: 0;
  }

  .track {
    --switch-track-color: var(--ui-border-color, var(--color-borders-input));

    display: flex;
    align-items: center;

    width: 100%;
    height: 100%;
    border-radius: 0.625rem;

    background-color: var(--switch-track-color);

    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .thumb {
    transform: translateX(-0.125rem);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid var(--switch-track-color);
    border-radius: 50%;

    color: var(--switch-track-color);

    background-color: var(--ui-bg-color, var(--color-background));

    transition: transform 0.15s ease, border-color 0.15s ease;
  }

  .input {
    &:checked + .track {
      --switch-track-color: var(--ui-accent-color, var(--color-primary));

      .thumb {
        transform: translateX(0.75rem);
      }
    }

    &:focus-visible + .track {
      outline: 2px solid var(--ui-accent-color, var(--color-primary));
      outline-offset: 2px;
    }
  }

  .disabled {
    cursor: default;
    opacity: var(--input-disabled-opacity, 0.5);
  }

  .locked {
    cursor: default;
  }

  .lockIconTransition {
    transform: scale(0.5);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.15s ease;

    &:global(.open) {
      transform: scale(1);
    }
  }

  .lockIcon {
    font-size: 0.625rem;
  }

  .permissionColors {
    .track {
      --switch-track-color: var(--color-error);
    }

    .input:checked + .track {
      --switch-track-color: var(--color-green);
    }

    .input:focus-visible + .track {
      outline-color: var(--color-error);
    }

    .input:checked:focus-visible + .track {
      outline-color: var(--color-green);
    }
  }
}
