:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  // Wrapper
  --neeto-ui-switch-wrapper-width: fit-content;

  // Switch Item
  --neeto-ui-switch-item-width: 2.75rem;
  --neeto-ui-switch-item-height: 1.5rem;
  --neeto-ui-switch-item-border-width: 2px;
  --neeto-ui-switch-item-border-color: transparent;
  --neeto-ui-switch-item-border-radius: 1.25rem;
  --neeto-ui-switch-item-bg-color: rgb(var(--neeto-ui-gray-300));
  --neeto-ui-switch-item-opacity: 1;

  // Switch
  --neeto-ui-switch-width: 1.25rem;
  --neeto-ui-switch-height: 1.25rem;
  --neeto-ui-switch-color: rgb(var(--neeto-ui-gray-400));
  --neeto-ui-switch-bg-color: rgb(var(--neeto-ui-white));
  --neeto-ui-switch-transform: translateX(0);
  --neeto-ui-switch-border-radius: 1rem;
  --neeto-ui-switch-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);

  // Checked
  --neeto-ui-switch-item-checked-bg-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-switch-checked-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-switch-checked-transform: translateX(1.25rem);

  // Margin
  --neeto-ui-switch-label-margin: 0.75rem;

  // Focus Within
  --neeto-ui-switch-focus-within-box-shadow: 0 0 0 3px rgb(var(--neeto-ui-gray-200));

  // Focus Visible
  --neeto-ui-switch-focus-visible-outline: 3px solid rgba(var(--neeto-ui-primary-500), 50%);
  --neeto-ui-switch-focus-visible-outline-offset: 1px;
  --neeto-ui-switch-focus-visible-box-shadow: none;
}

.neeto-ui-switch__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: var(--neeto-ui-switch-wrapper-width);

  .neeto-ui-switch__container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .neeto-ui-label {
      margin-left: var(--neeto-ui-switch-label-margin);
    }

    .neeto-ui-switch__item {
      width: var(--neeto-ui-switch-item-width);
      height: var(--neeto-ui-switch-item-height);
      border: var(--neeto-ui-switch-item-border-width) solid var(--neeto-ui-switch-item-border-color);
      border-radius: var(--neeto-ui-switch-item-border-radius);
      transition: var(--neeto-ui-transition);
      background-color: var(--neeto-ui-switch-item-bg-color);
      cursor: pointer;
      display: inline-flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-shrink: 0;
      opacity: var(--neeto-ui-switch-item-opacity);

      input[type="checkbox"] {
        width: 0;
        height: 0;
        opacity: 0;
        border: 0;
      }

      &.neeto-ui-switch__item--disabled {
        --neeto-ui-switch-item-opacity: 0.7;
        cursor: not-allowed;
      }

      &.neeto-ui-switch__item--checked {
        background-color: var(--neeto-ui-switch-item-checked-bg-color);
      }

      .neeto-ui-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--neeto-ui-switch-width);
        height: var(--neeto-ui-switch-height);
        transition: var(--neeto-ui-transition);
        transform: var(--neeto-ui-switch-transform);
        color: var(--neeto-ui-switch-color);
        background-color: var(--neeto-ui-switch-bg-color);
        border-radius: var(--neeto-ui-switch-border-radius);
        box-shadow: var(--neeto-ui-switch-box-shadow);

        &--checked {
          transform: var(--neeto-ui-switch-checked-transform);
          color: var(--neeto-ui-switch-checked-color);
        }
      }

      &:focus-within {
        box-shadow: var(--neeto-ui-switch-focus-within-box-shadow);
      }

      &:focus-visible {
        outline: var(--neeto-ui-switch-focus-visible-outline);
        outline-offset: var(--neeto-ui-switch-focus-visible-outline-offset);
        box-shadow: var(--neeto-ui-switch-focus-visible-box-shadow);
      }
    }
  }
}

.neetix-switch {
  --neeto-ui-switch-item-checked-bg-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-switch-checked-color: rgb(var(--neeto-ui-primary-500));
}
