/**
 * Radio
 * @define radio
 */

@use 'sass:map';

// Exposed variables
$theme: null !default;
$radio: null !default;

.ecl-radio {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s-2xs);

  &:last-child {
    margin-bottom: 0;
  }
}

// Disabled
.ecl-radio--disabled {
  opacity: 0.5;
}

.ecl-radio__input {
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ecl-radio__label {
  color: map.get($radio, 'label-color');
  display: inline-flex;
  font: var(--f-m);
  padding: var(--s-s) 0;
  position: relative;
  max-width: var(--max-w);
  white-space: pre-wrap;
}

.ecl-radio--disabled .ecl-radio__label {
  cursor: not-allowed;
}

.ecl-radio__box {
  background-color: map.get($radio, 'box-background');
  border: map.get($radio, 'box-border-width') solid
    map.get($radio, 'box-border-color');
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  flex-shrink: 0;
  height: map.get($radio, 'box-size');
  margin-inline-end: var(--s-xs);
  margin-top: map.get($radio, 'box-margin-top');
  position: relative;
  width: map.get($radio, 'box-size');
}

.ecl-radio__box:not(.ecl-radio__box--disabled) {
  cursor: pointer;
}

.ecl-radio__label:hover .ecl-radio__box {
  @if map.has-key($radio, 'hover-circle') {
    &::before {
      @each $property, $value in map.get($radio, 'hover-circle') {
        #{$property}: $value;
      }
    }
  }
}

.ecl-radio__help {
  box-sizing: border-box;
  color: map.get($radio, 'help-text-color');
  display: block;
  font: map.get($radio, 'help-text-font');
}

// Focus
.ecl-radio__input:focus-visible ~ .ecl-radio__label,
.ecl-radio__input:active ~ .ecl-radio__label {
  .ecl-radio__box {
    @if map.has-key($radio, 'hover-circle') {
      &::before {
        @each $property, $value in map.get($radio, 'hover-circle') {
          #{$property}: $value;
        }
      }
    } @else {
      outline: 2px solid var(--c-p);
      outline-offset: 2px;
    }
  }
}

// Checked
.ecl-radio__input:checked ~ .ecl-radio__label {
  .ecl-radio__box {
    border-color: map.get($radio, 'box-border-color-checked');
    border-width: map.get($radio, 'box-border-width-checked');
  }

  .ecl-radio__box-inner {
    background: var(--c-p);
    border-radius: 50%;
    box-sizing: border-box;
    display: map.get($radio, 'box-inner-display');
    height: 0.875rem;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.875rem;
    transform: translate(-50%, -50%);
  }

  .ecl-radio__box:hover {
    border-color: map.get($radio, 'box-border-color-checked-hover');

    .ecl-radio__box-inner {
      background: map.get($radio, 'box-border-color-checked-hover');
    }
  }
}

// Invalid
.ecl-radio__box--invalid {
  border-color: map.get($radio, 'invalid-border-color');
}

// stylelint-disable no-descending-specificity
.ecl-radio__input:checked ~ .ecl-radio__label .ecl-radio__box--invalid {
  border-color: map.get($radio, 'invalid-border-color');

  .ecl-radio__box-inner {
    background-color: map.get($radio, 'invalid-border-color');
  }
}

.ecl-radio__label:hover .ecl-radio__box--invalid,
.ecl-radio__input:checked ~ .ecl-radio__label:hover .ecl-radio__box--invalid {
  border-color: map.get($radio, 'invalid-border-color-hover');

  .ecl-radio__box-inner {
    background-color: map.get($radio, 'invalid-border-color-hover');
  }
}
// stylelint-enable no-descending-specificity

// Binary radio
.ecl-radio--binary {
  display: inline-flex;
  margin-bottom: 0;
  margin-inline-end: map.get($radio, 'binary-margin');
  vertical-align: top;
}

.ecl-radio--binary:last-child {
  margin-inline-end: 0;
}

.ecl-form-label + .ecl-radio--binary + .ecl-radio--binary {
  margin-top: var(--s-xs);
}
