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


.radio,
.checkbox {
  border-color: var(--color-interactive-secondary);

  > label {
    position: relative;
    .padding(left, 48px);

    input[type="radio"],
    input[type="checkbox"] {
      display: block;
      position: absolute;
      top: 13px;
      .left(40px);
    }
  }
}

.tw-checkbox-button {
  border: 1px solid var(--color-interactive-secondary);
  background: var(--color-background-screen);
  width: 22px;
  height: 22px;
  border-radius: @border-radius-base;
  display: inline-block;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;

  .np-theme-personal & {
    border: none;
    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
  }

  .tw-checkbox-check, .np-tw-checkbox-indeterminate {
    width: 20px;
    height: 20px;
    margin: 0;
    display: none;
    color: var(--color-background-screen);
  }

  &:not(.disabled, :disabled):hover,
  input[type="checkbox"]:hover + &,
  .checkbox:hover & {
    border-color: var(--color-interactive-secondary-hover);

    .np-theme-personal & {
      box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
    }
  }

  &:not(.disabled, :disabled):focus,
  &:not(.disabled, :disabled).focus,
  &:not(.disabled, :disabled):focus:hover,
  &:not(.disabled, :disabled).focus:hover,
  input[type="checkbox"]:focus + &,
  &:not(.disabled, :disabled):active,
  &:not(.disabled, :disabled).active,
  input[type="checkbox"]:active + & {
    border-color: var(--color-interactive-secondary);
    outline: none;
  }

  input[type="checkbox"]:focus-visible + & {
    .ring();

    .checkbox & {
      outline: none;
    }
  }

  &:checked,
  &.checked,
  input[type="checkbox"]:checked + &,
  input[type="checkbox"]:indeterminate + & {
    border-color: var(--color-interactive-accent) !important;
    background-color: var(--color-interactive-accent);

    .np-theme-personal & {
      background-color: var(--color-interactive-primary);
      box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
    }
  }

  &:checked,
  &.checked,
  input[type="checkbox"]:checked + & {
    .tw-checkbox-check {
      display: inline-block;
    }

  }

  input[type="checkbox"]:indeterminate + & {
    .np-tw-checkbox-indeterminate {
      display: inline-block;
    }
  }

  &:checked:hover,
  &.checked:hover,
  input[type="checkbox"]:not(.disabled, :disabled):checked:hover + &,
  input[type="checkbox"]:not(.disabled, :disabled):indeterminate:hover + & {
    border-color: var(--color-interactive-accent-hover) !important;
    background-color: var(--color-interactive-accent-hover);

    .np-theme-personal & {
      border-color: var(--color-interactive-primary-hover) !important;
      background-color: var(--color-interactive-primary-hover);
      box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
    }
  }

  &:checked:active,
  &.checked:active,
  input[type="checkbox"]:not(.disabled, :disabled):checked:active + &,
  input[type="checkbox"]:not(.disabled, :disabled):indeterminate:active + & {
    border-color: var(--color-interactive-accent-active) !important;
    background-color: var(--color-interactive-accent-active);

    .np-theme-personal & {
      border-color: var(--color-interactive-primary-active) !important;
      background-color: var(--color-interactive-primary-active);
      box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
    }
  }

  .checkbox.has-error &,
  &.has-error {
    border-color: var(--color-interactive-negative) !important;

    &:checked,
    &.checked {
      background-color: var(--color-interactive-negative);
    }
  }

  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked + &,
  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):indeterminate + & {
    border-color: var(--color-interactive-negative) !important;
    background-color: var(--color-interactive-negative);
  }

  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:hover + &,
  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:indeterminate + & {
    border-color: var(--color-interactive-negative-hover) !important;
    background-color: var(--color-interactive-negative-hover);
  }

  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:active + &,
  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):indeterminate + & {
    border-color: var(--color-interactive-negative-active) !important;
    background-color: var(--color-interactive-negative-active);
  }
}

.tw-radio-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-interactive-secondary);
  background: var(--color-background-screen);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border 0.15s ease-in-out;

  .np-theme-personal & {
    border: none;
    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
    position: relative;
    top: 0;
    left: 0;
  }

  .tw-radio-check {
    border-radius: 50%;
    text-align: center;
    width: 12px;
    height: 12px;
    display: block;
    opacity: 0;
    transition: all 0.15s ease-in-out;
  }

  .radio:not(.disabled, :disabled):hover &,
  &:not(.disabled, :disabled):hover {
    border-color: var(--color-interactive-secondary-hover);

    .np-theme-personal & {
      border-color: transparent;
      box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);

      &:checked,
      &.checked {
        box-shadow: inset 0 0 0 1px var(--color-interactive-primary);

        .tw-radio-check {
          background-color: var(--color-interactive-primary-hover);
        }
      }
    }
  }

  &:not(.disabled, :disabled):focus,
  &:not(.disabled, :disabled).focus,
  &:not(.disabled, :disabled):active,
  &:not(.disabled, :disabled).active {
    border-color: var(--color-interactive-secondary-active);
    outline: none;
  }

  &:checked,
  &.checked {
    border-color: var(--color-interactive-accent) !important;

    .tw-radio-check {
      opacity: 1;
      background-color: var(--color-interactive-accent);
    }

    .np-theme-personal & {
      border-color: transparent !important;
      box-shadow: inset 0 0 0 1px var(--color-interactive-primary);

      .tw-radio-check {
        background-color: var(--color-interactive-primary);
        max-height: 12px;
        max-width: 12px;
      }
    }
  }

  .radio.has-error &,
  &.has-error {
    border-color: var(--color-interactive-negative) !important;

    &:checked .tw-radio-check,
    &.checked .tw-radio-check {
      background-color: var(--color-interactive-negative);
    }
  }
}

.radio .tw-radio-button {
  position: absolute;
  .left(13px);

  top: 11px;
}

.checkbox .tw-checkbox-button {
  position: absolute;
  .left(14px);

  top: 12px;
}

.form-inline .tw-checkbox-button,
.form-inline .tw-radio-button {
  vertical-align: bottom;
}

.form-horizontal {
  .checkbox,
  .radio {
    padding-top: 0;

    > label {
      margin-bottom: 0;
    }
  }
}

// Neptune Checkbox and Radio components use flex for vertical centre alignment
.np-radio.radio,
.np-checkbox.checkbox {
  min-width: fit-content;

  .np-radio-button,
  .np-checkbox-button {
    position: relative;
    flex-shrink: 0;
  }

  .tw-checkbox-button,
  .tw-radio-button {
    position: static;
  }

  > label {
    display: flex;
    align-items: center;
    // Added rtl mixing even the horizontal values are equal, to increase specificity created in line 11
    .padding-shorthand(var(--size-8) var(--size-16));

    .np-checkbox__text,
    .np-radio__text {
      display: block;
      padding-top: 1px; // `0` would look off due to checkbox misalignment

      :not(.np-theme-personal) & {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-16);
        line-height: var(--line-height-20);
        // Account for our funky font baseline
        padding-top: 3px;
      }
    }

    .np-theme-personal & {
      padding: var(--input-padding);
    }
  }
}

.np-radio {
  .np-radio__avatar {
    pointer-events: none;
  }
}