//
// Control item list
//

.control-items-list,
.switch-item-container,
.checkbox-item-container {
  @include list-unstyled();
  margin: 0;

  .control-item-error-message {
    display: none;
  }

  &:has(input:is(:user-invalid, [aria-invalid="true"])) .control-item-error-message {
    display: block;
  }
}

.control-item-error-message {
  padding: $ouds-control-item-space-padding-block-top-error-text $ouds-control-item-space-padding-inline 0;
  color: var(--#{$prefix}color-content-status-negative);
  @include get-font-size("label-medium");
}

//
// Control item
//

%control-item {
  --#{$prefix}control-item-label-color: #{$ouds-color-content-default};
  --#{$prefix}control-item-error-icon-offset: #{$ouds-control-item-space-padding-inline + $ouds-control-item-space-padding-inline-error-icon};
  --#{$prefix}control-item-error-icon-offset-right: var(--#{$prefix}control-item-error-icon-offset);
  --#{$prefix}control-item-error-icon-offset-left: unset;

  position: relative;
  display: flex;
  gap: $ouds-control-item-space-column-gap;
  min-width: px-to-rem($ouds-control-item-size-min-width);
  min-height: $form-check-min-height;
  padding: $ouds-control-item-space-padding-block-default $ouds-control-item-space-padding-inline;
  @include border-radius($ouds-control-item-border-radius);

  &.component-max-width {
    max-width: px-to-rem($ouds-control-item-size-max-width);
  }

  // Handle focus
  &:has(:focus-visible) {
    @include focus-visible();
  }

  .control-item-indicator {
    outline: 0;
    box-shadow: none;
  }

  &:has([aria-readonly="true"]) {
    pointer-events: none;
  }

  // Handle disabled
  &:has(input:disabled) {
    pointer-events: none;

    * {
      color: $ouds-color-action-disabled;
    }
  }

  // Handle interactive background
  &:has(input:hover),
  &:has(input:focus-visible),
  &:has(input:active) {
    background-color: $ouds-control-item-color-bg-hover;
  }

  // Handle invalid state
  &:has(input:is([aria-invalid="true"], :user-invalid)) {
    --#{$prefix}control-item-label-color: #{$ouds-color-action-negative-enabled};

    padding-right: #{$ouds-control-item-space-padding-inline + $ouds-control-item-size-icon + $ouds-control-item-space-column-gap};

    .control-item-assets-container:last-child {
      display: none;
    }

    &::after {
      content: "";
    }
  }

  &:has(input:hover:is([aria-invalid="true"], :user-invalid)) {
    --#{$prefix}control-item-label-color: #{$ouds-color-action-negative-hover};
  }

  &:has(input:focus-visible:is([aria-invalid="true"], :user-invalid)) {
    --#{$prefix}control-item-label-color: #{$ouds-color-action-negative-focus};
  }

  &:has(input:active:is([aria-invalid="true"], :user-invalid)) {
    --#{$prefix}control-item-label-color: #{$ouds-color-action-negative-pressed};
  }

  &::after {
    position: absolute;
    top: $ouds-control-item-space-padding-block-default;
    right: var(--#{$prefix}control-item-error-icon-offset-right);
    left: var(--#{$prefix}control-item-error-icon-offset-left);
    width: $ouds-control-item-size-icon - 2 * $ouds-control-item-space-padding-inline-error-icon;
    height: calc(100% - 2 * $ouds-control-item-space-padding-block-default);
    max-height: px-to-rem($ouds-control-item-size-max-height-assets-container);
    font-size: $ouds-control-item-size-icon;
    line-height: 1;
    color: var(--#{$prefix}control-item-label-color);
    background-color: currentcolor;
    mask: var(--#{$prefix}error-icon) no-repeat center;
  }
}


//
// Control item containers
//

.control-item-assets-container {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  max-height: px-to-rem($ouds-control-item-size-max-height-assets-container);

  svg,
  img,
  .icon {
    width: 1em;
    height: 1em;
    overflow: hidden;
    font-size: $ouds-control-item-size-icon;
    line-height: 1;
  }
}

.control-item-text-container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  row-gap: $ouds-control-item-space-row-gap;
  justify-content: center;
}


//
// Control item atoms
//

// Label
.control-item-label {
  margin: 0;
  color: var(--#{$prefix}control-item-label-color, $ouds-color-content-default);
  cursor: $form-check-label-cursor;
  @include get-font-size("label-large");

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: transparent;
  }
}

// Description
.control-item-description {
  margin: 0;
  color: $ouds-color-content-muted;
  @include get-font-size("label-medium");
}

// Indicator
.control-item-indicator {
  --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-unselected)};
  --#{$prefix}control-item-indicator-color: #{$ouds-color-border-emphasized};
  --#{$prefix}checkbox-check-icon: #{escape-svg($form-check-input-checked-bg-image)};

  position: relative;
  flex-shrink: 0;
  forced-color-adjust: none;
  width: $form-check-input-width;
  height: $form-check-input-width;
  overflow: hidden;
  color: var(--#{$prefix}control-item-indicator-color);
  vertical-align: middle;
  appearance: none;
  cursor: $form-check-label-cursor;
  background-color: transparent;
  border: var(--#{$prefix}control-item-indicator-border-width) solid var(--#{$prefix}control-item-indicator-color);
  print-color-adjust: exact;

  @media (prefers-contrast: more) or (forced-colors: active) {
    --#{$prefix}control-item-indicator-color: #{$ouds-color-content-default} !important; // stylelint-disable-line declaration-no-important
  }

  &::before {
    position: absolute;
    top: calc(-1 * var(--#{$prefix}control-item-indicator-border-width));
    left: calc(-1 * var(--#{$prefix}control-item-indicator-border-width));
    display: block;
    width: calc(100% + 2 * var(--#{$prefix}control-item-indicator-border-width));
    height: calc(100% + 2 * var(--#{$prefix}control-item-indicator-border-width));
    content: "";
    background-color: transparent;
    mask-repeat: no-repeat;
  }

  &:indeterminate:where([type="checkbox"]),
  &:checked {
    --#{$prefix}control-item-indicator-color: #{$ouds-color-action-selected};
  }

  &:is(:user-invalid, [aria-invalid="true"]) {
    --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-enabled};

    &:hover {
      --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-hover};
    }

    &:focus-visible {
      --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-focus};
    }

    &:active {
      --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-pressed};
    }
  }

  &[type="checkbox"],
  &[role="checkbox"] {
    @include border-radius($form-check-input-border-radius);
  }

  &[type="radio"] {
    @include border-radius($form-check-radio-border-radius);
  }

  &:indeterminate[type="checkbox"],
  &[role="checkbox"][aria-checked="mixed"] {
    --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected)};

    &::before {
      background-color: currentcolor;
      mask-image: escape-svg($form-check-input-indeterminate-bg-image);
    }
  }

  &[role="checkbox"][aria-checked="true"] {
    --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected)};

    &::before {
      background-color: currentcolor;
      mask-image: var(--#{$prefix}checkbox-check-icon);
    }
  }

  &:checked {
    &::before {
      background-color: currentcolor;
    }

    &[type="checkbox"] {
      --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected)};

      &::before {
        mask-image: var(--#{$prefix}checkbox-check-icon);
      }
    }

    &[type="radio"] {
      --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected)};

      &::before {
        mask-image: escape-svg($form-check-radio-checked-bg-image);
      }
    }

    &:hover {
      &[type="checkbox"] {
        --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected-hover)};
      }

      &[type="radio"] {
        --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected-hover)};
      }
    }

    &:focus-visible {
      &[type="checkbox"],
      &[role="checkbox"] {
        --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected-focus)};
      }

      &[type="radio"] {
        --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected-focus)};
      }
    }

    &:active {
      &[type="checkbox"] {
        --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected-pressed)};
      }

      &[type="radio"] {
        --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected-pressed)};
      }
    }
  }

  &:hover {
    --#{$prefix}control-item-indicator-color: #{$ouds-color-action-hover};

    &[type="checkbox"] {
      --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-unselected-hover)};
    }

    &[type="radio"] {
      --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-unselected-hover)};
    }
  }

  &:focus-visible {
    --#{$prefix}control-item-indicator-color: #{$ouds-color-action-focus};

    &[type="checkbox"] {
      --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-unselected-focus)};
    }

    &[type="radio"] {
      --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-unselected-focus)};
    }
  }

  &:active {
    --#{$prefix}control-item-indicator-color: #{$ouds-color-action-pressed};

    &[type="checkbox"] {
      --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-unselected-pressed)};
    }
    &[type="radio"] {
      --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-unselected-pressed)};
    }
  }

  &:disabled,
  &[role="checkbox"][aria-readonly="true"] {
    color: $ouds-color-action-disabled;
    pointer-events: none;
    border-color: $ouds-color-action-disabled;
  }

  &[role="checkbox"][aria-readonly="true"] {
    color: $ouds-color-action-read-only-primary;
    border-color: $ouds-color-action-read-only-secondary;
  }
}

// stylelint-disable selector-max-attribute
[role="radiogroup"] .control-item-indicator[role="radio"]  {
  @include border-radius($form-check-radio-border-radius);

  &[aria-checked="true"] {
    --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected)};

    &::before {
      background-color: currentcolor;
      mask-image: escape-svg($form-check-radio-checked-bg-image);
    }
  }

  &:checked:focus-visible{
    --#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected-focus)};
  }
}

[role="radiogroup"][aria-readonly="true"] {
  pointer-events: none;

  .control-item-indicator[role="radio"] {
    color: $ouds-color-action-read-only-primary;
    border-color: $ouds-color-action-read-only-secondary;
  }
}
// stylelint-enable selector-max-attribute


//
// Control item variants
//

.control-item-divider {
  padding-bottom: calc($ouds-control-item-space-padding-block-default - $ouds-divider-border-width);
  border-bottom: $ouds-divider-border-width solid $ouds-color-border-default;

  &:has(input:is([aria-invalid="true"], :user-invalid)) {
    border-color: var(--#{$prefix}control-item-label-color);
  }
}

.control-item-reverse {
  flex-direction: row-reverse;

  &:has(input:is([aria-invalid="true"], :user-invalid)) {
    --#{$prefix}control-item-error-icon-offset-right: unset;
    --#{$prefix}control-item-error-icon-offset-left: var(--#{$prefix}control-item-error-icon-offset);

    padding-right: $ouds-control-item-space-padding-inline;
    padding-left: calc($ouds-control-item-space-padding-inline + $ouds-control-item-size-icon + $ouds-control-item-space-column-gap);
  }
}


//
// Control item switch indicator
//

@keyframes switch-check-in {
  0%,
  99% {
    background-color: transparent;
  }
  100% {
    background-color: $ouds-switch-color-check;
  }
}

.control-item-indicator[role="switch"] {
  --#{$prefix}switch-track-color: #{$ouds-switch-color-track-unselected};

  forced-color-adjust: none;
  min-width: $ouds-switch-size-min-width;
  min-height: $ouds-switch-size-min-height;
  background-color: var(--#{$prefix}switch-track-color);
  border: 0;
  @include border-radius($ouds-switch-border-radius-track, $ouds-switch-border-radius-track);

  @media (prefers-contrast: more) or (forced-colors: active) {
    --#{$prefix}switch-track-color: #{$ouds-color-content-default} !important; // stylelint-disable-line declaration-no-important
  }

  &[type="checkbox"]::before,
  &[aria-readonly="true"]::before {
    position: absolute;
    top: 50%;
    left: $ouds-switch-space-padding-inline-unselected;
    display: block;
    width: $ouds-switch-size-width-cursor-unselected;
    height: $ouds-switch-size-height-cursor-unselected;
    content: "";
    background-color: $ouds-switch-color-cursor;
    box-shadow: $ouds-elevation-raised;
    mask: none;
    transform: translateY(-50%);
    @include border-radius($form-switch-border-radius, $form-switch-border-radius);
    @include transition($form-switch-transition);
  }

  &:hover,
  &:focus-visible,
  &:active {
    --#{$prefix}switch-track-color: #{$ouds-switch-color-track-unselected-interaction};
  }

  &:active::before {
    width: $ouds-switch-size-width-cursor-unselected-pressed;
  }

  &:disabled,
  &[aria-readonly="true"] {
    background-color: $ouds-color-action-disabled;
  }

  // stylelint-disable selector-max-attribute
  &:checked,
  &[aria-readonly="true"][aria-checked="true"] {
    --#{$prefix}switch-track-color: #{$ouds-switch-color-track-selected};

    &::before {
      left: calc($ouds-switch-size-min-width - $ouds-switch-space-padding-inline-selected - $ouds-switch-size-width-cursor-selected);
      width: $ouds-switch-size-width-cursor-selected;
      height: $ouds-switch-size-height-cursor-selected;
    }

    &:not(:active)::after {
      position: absolute;
      top: 50%;
      right: $ouds-switch-space-padding-inline-selected;
      display: block;
      width: $ouds-switch-size-width-cursor-selected;
      height: $ouds-switch-size-height-cursor-selected;
      content: "";
      background-color: $ouds-switch-color-check;
      opacity: $ouds-switch-opacity-check;
      mask: escape-svg($form-switch-checked-bg-image);
      transform: translateY(-50%);
      animation: .15s linear 0s switch-check-in;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }

    &:hover,
    &:focus-visible,
    &:active {
      --#{$prefix}switch-track-color: #{$ouds-switch-color-track-selected-interaction};

      &::after {
        background-color: $ouds-switch-color-check-interaction;
      }
    }

    &:active::before {
      left: calc($ouds-switch-size-min-width - $ouds-switch-space-padding-inline-selected - $ouds-switch-size-width-cursor-selected-pressed);
      width: $ouds-switch-size-width-cursor-selected-pressed;
    }

    &:disabled {
      background-color: $ouds-color-action-disabled;

      &::after {
        background-color: $ouds-color-action-disabled;
      }
    }

    &[aria-readonly="true"] {
      background-color: $ouds-color-action-read-only-secondary;

      &::after {
        background-color: $ouds-color-action-read-only-primary;
      }
    }
    // stylelint-enable selector-max-attribute
  }
}


//
// Control item standalone
//

%control-item-standalone {
  @extend %control-item;
  @extend .control-item-label;
  display: inline-flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  min-width: $ouds-checkbox-size-min-width;
  min-height: $ouds-checkbox-size-min-height;
  @include border-radius($ouds-control-item-border-radius-item-only);
}


//
// Checkbox
//

.checkbox-item {
  @extend %control-item;
}

.checkbox-standalone {
  @extend %control-item-standalone;
}


//
// Radio button
//

.radio-button-item {
  @extend %control-item;
}

.radio-button-standalone {
  @extend %control-item-standalone;
}

.radio-button-extra-label {
  margin: 0;
  font-weight: $ouds-font-weight-system-web-strong;
  color: $ouds-color-content-default;
  @include get-font-size("label-medium");
}

.radio-button-item-outlined {
  &:hover,
  &:active,
  &:has(input:checked) {
    padding-block: calc($ouds-control-item-space-padding-block-default - $ouds-divider-border-width);
    padding-inline: calc($ouds-control-item-space-padding-inline - $ouds-divider-border-width);
    border: $ouds-divider-border-width solid $ouds-color-border-default;

    &:has(input:is([aria-invalid="true"], :user-invalid)) {
      --#{$prefix}control-item-error-icon-offset: #{$ouds-control-item-space-padding-inline + $ouds-control-item-space-padding-inline-error-icon - $ouds-divider-border-width};
    }
  }

  &:has(input:checked:not([aria-invalid="true"], :user-invalid)) {
    border-color: $ouds-color-action-selected;

    &:hover {
      border-color: $ouds-color-action-hover;
    }

    &:active {
      border-color: $ouds-color-action-pressed;
    }
  }

  &:hover {
    border-color: $ouds-color-action-hover;
  }

  &:active {
    border-color: $ouds-color-action-pressed;
  }

  &:has(input:is([aria-invalid="true"], :user-invalid)) {
    border-color: var(--#{$prefix}control-item-label-color);
  }

  &:has(input:focus-visible) {
    padding: $ouds-control-item-space-padding-block-default $ouds-control-item-space-padding-inline;
    border-width: 0;
  }
}


//
// Switch
//

.switch-item,
.form-switch {
  @extend %control-item;
  flex-direction: row-reverse;

  &:has(input:is([aria-invalid="true"], :user-invalid)) {
    --#{$prefix}control-item-error-icon-offset-right: unset;
    --#{$prefix}control-item-error-icon-offset-left: var(--#{$prefix}control-item-error-icon-offset);

    padding-right: $ouds-control-item-space-padding-inline;
    padding-left: calc($ouds-control-item-space-padding-inline + $ouds-control-item-size-icon + $ouds-control-item-space-column-gap);
  }

  &.control-item-reverse {
    flex-direction: initial;

    &:has(input:is([aria-invalid="true"], :user-invalid)) {
      --#{$prefix}control-item-error-icon-offset-right: var(--#{$prefix}control-item-error-icon-offset);
      --#{$prefix}control-item-error-icon-offset-left: unset;

      padding-right: calc($ouds-control-item-space-padding-inline + $ouds-control-item-size-icon + $ouds-control-item-space-column-gap);
      padding-left: $ouds-control-item-space-padding-inline;
    }
  }
}

.switch-standalone {
  @extend %control-item-standalone;
  padding: 0;

  &:has(input:hover),
  &:has(input:active),
  &:has(input:focus-visible) {
    background-color: transparent;
    outline: 0;
    box-shadow: none;
  }

  input:focus-visible {
    @include focus-visible();
  }
}


//
// Bootstrap compatibility
//

@if $enable-bootstrap-compatibility {
  .form-check {
    @extend %control-item;
    align-items: center;
  }

  .form-check-input {
    @extend .control-item-indicator;

    &.is-invalid {
      @extend [aria-invalid="true"];
    }
  }

  .form-check-label {
    @extend .control-item-label;
  }

  .form-check-reverse {
    @extend .control-item-reverse;

    .form-check-label {
      margin-right: auto;
    }
  }
}