// ********************************************
// container definition
$el-container: #{$prefix}-form-element-radio;
$el-container-error: #{$el-container}--error;
$el-container-disabled: #{$el-container}--disabled;
$el-container-read-only: #{$el-container}--readonly;

// ********************************************
// elements
$el-input: #{$el-container}__input;
$el-label: #{$el-container}__label;
$el-button: #{$el-container}__input-button;
$el-text: #{$el-container}__label-text;
$el-children: #{$el-container}__radio-children;

// ********************************************
// local
$border-type: solid 1px;
$border-type-focus: solid 2px;
$border-type-mobile: solid 2px;
$border-type-focus-mobile: solid 3px;

.#{$el-input} {
  position: absolute;
  opacity: 0;
  right: 0;
}

.#{$el-text} {
  @include body-text-style();
  transition: duration(base) easing(base);
  color: color(neutral, 800);
  line-height: 100%;
  position: relative;
  bottom: -1px; // fix - extra pixel below the text
}

.#{$el-button} {
  border-radius: 50% !important;
  transition: duration(base) easing(base);
  width: space(s);
  min-width: space(s);
  height: space(s);
  margin-right: space(xs);
  border: $border-type color(neutral, 400);
  background: color(neutral, 000);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  position: relative;
}

.#{$el-label} {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.#{$el-children} {
  padding-left: space(m);
}

// ********************************************
// Default container & elements           *****
.#{$el-container} {
  width: fit-content;
  padding-bottom: space(s);
  circle.unchecked {
    fill: color(neutral, 000);
  }

  .#{$el-label} {
    &:hover {
      .#{$el-button} {
        border-color: color(brand-primary, 600);
        background-color: color(brand-primary, 200);
      }
      circle.unchecked {
        fill: color(brand-primary, 200);
      }
    }
    .#{$el-button} {
      &:focus {
        box-shadow: none;
      }

      &:focus:not(:active) {
        border: $border-type-focus color(brand-primary, 700);
      }

      &:active {
          background-color: color(neutral, 000);
        circle.unchecked {
          fill: color(neutral, 000);
        }
      }
    }
  }

  .#{$el-input} {
    &:checked + .#{$el-button} {
      circle.checked {
        fill: color(brand-primary, 600);
      }
    }
  }
}

// ********************************************
// Error container & elements             *****
.#{$el-container-error} {
  .#{$el-button} {
    border-color: color(danger, 900);
  }

  .#{$el-label} {
    &:hover {
      .#{$el-button}:not(:focus) {
        border-color: color(danger, 900);
      }
    }
    &:active {
      .#{$el-button} {
        border-color: color(danger, 900);;
      }
      circle.unchecked {
        fill: color(neutral, 080);
      }
    }
  }

  .#{$el-input} {
    &:checked + .#{$el-button} {
      circle.checked {
        fill: color(danger, 900);
      }
    }
  }
}

// ********************************************
// Disabled container & elements          *****
.#{$el-container-disabled} {
  circle.checked {
    fill: color(neutral, 400);
  }
  circle.unchecked {
    fill: color(neutral, 080);
  }

  .#{$el-label} {
    cursor: not-allowed;
    &:hover {
      .#{$el-button} {
        border-color: color(neutral, 400);
        background-color: color(neutral, 080);
      }
      circle.unchecked {
        fill: color(neutral, 080);
      }
    }
    &:active {
      .#{$el-button} {
        background-color: color(neutral, 080);
      }
      circle.unchecked {
        fill: color(neutral, 080);
      }
    }

    .#{$el-input} {
      &:checked + .#{$el-button} {
        background-color: color(neutral, 080);
      }
    }
  }

  .#{$el-text} {
    color: color(neutral, 500);
  }

  .#{$el-button} {
    pointer-events: none;
    background: color(neutral, 080);
    &:hover {
      border-color: color(neutral, 400);
    }
  }
}

// ********************************************
// Read only container & elements         *****
.#{$el-container-read-only} {
  .#{$el-label} {
    &:hover {
      .#{$el-button} {
        border-color:  color(neutral, 400);
      }
    }
  }
  .#{$el-input} {
    &:checked + .#{$el-button} {
      circle.checked {
        fill: color(neutral, 500);
      }
    }
  }
}

@include md {
  .#{$el-text} {
    font-size: 16px;
  }

  .#{$el-container} {
    padding-bottom: calc(#{space(m)} * 0.4);
    -webkit-tap-highlight-color: transparent;

    .#{$el-label} {
      padding: calc(#{space(xxs)} * 0.81) 0;
      .#{$el-button} {
        border: $border-type-mobile color(neutral, 400);
        &:focus {
          border: $border-type-focus-mobile color(brand-primary, 700);
        }
      }
    }
  }
  
  .#{$el-button} {
    width: calc(#{space(s)} * 1.22);
    min-width: calc(#{space(s)} * 1.22);
    height: calc(#{space(s)} * 1.22);
    border: $border-type-mobile color(neutral, 400);
    margin-right: calc(#{space(s)} * 0.81);
  }

  .#{$el-container-error} {
    .#{$el-label} { // added this specificity so it correctly overwrites the error state
      .#{$el-button} {
        border: $border-type-mobile color(danger, 900);
      }
    }
  }
}