@use 'sass:math';
@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((radio))} {
  font-size: #{getValName((radio, font-size))};
  cursor: pointer;
  display: inline-flex;
  line-height: 1;
  align-items: flex-start;
  padding: .6em 0em;
  min-height: 2.2em;
  input {
    display: none;
  }
  &.is-disabled {
    cursor: not-allowed;
  }
}

#{getClassName((radio))} {
  @include set-css-val(
    radio,
    (
      'font-size': (heading8),
      'color': (color, neutral, 3),
      'checked-color': (color, primary),
      'disabled-color': (color, neutral, 3),
      'checked-disabled-color': (color, neutral, 4)
    )
  )
}

#{getClassName((radio, large))} {
  @include set-css-val(
    radio,
    (
      'font-size': (heading7)
    )
  );
}

#{getClassName((radio, mini))} {
  @include set-css-val(
    radio,
    (
      'font-size': (heading9)
    )
  );
}

#{getClassName((radio, input))} {
  display: inline-flex;
  align-items: center;
}

#{getClassName((radio, input, box))} {
  display: inline-flex;
  overflow: hidden;
  border-radius: 100%;
  padding: 2px;
  background-color: transparent;
  border: 1px solid currentColor;
  color: #{getValName((radio, color))};
  justify-content: center;
  align-items: center;
  &:after {
    width: .6em;height: .6em;
    border-radius: 100%;
    content: '';
    transition: .2s all;
    background-color: currentColor;
    opacity: 0;
  }
  
  input:checked + & {
    color: #{getValName((radio, checked-color))};
    &:after {
      opacity: 1;
    }
  }
  input:disabled + & {
    color: #{getValName((radio, disabled-color))};
    background-color: #{getValName((color, neutral, 1))};
  }
  input:checked:disabled + & {
    color: #{getValName((radio, checked-disabled-color))};
  }

  
}
#{getClassName((radio, label))} {
  margin-left: #{getValName((space, xs))};
}

#{getClassName((radio, group, mode-button))} {
  display: flex;
  #{getClassName((radio))} {
    position: relative;
    padding-left: 1em;
    padding-right: 1em;
    border: 1px solid  #{getValName((radio, color))};
    &:first-child {
      border-top-left-radius: #{getValName((border, radius, base))};
      border-bottom-left-radius: #{getValName((border, radius, base))};
    }
    &:last-child {
      border-top-right-radius: #{getValName((border, radius, base))};
      border-bottom-right-radius: #{getValName((border, radius, base))};
    }
    &:not(:first-child) {
      margin-left: -1px;
    }
    &.is-disabled {
      color: #{getValName((radio, disabled-color))};
      border-color: #{getValName((radio, disabled-color))};
    }
    &.is-checked {
      color: #{getValName((radio, checked-color))};
      border-color: #{getValName((radio, checked-color))};
      z-index: 1;
    }
  }
  #{getClassName((radio, input))} {
    display:none;
  }
  #{getClassName((radio, label))} {
    margin-left: 0px;
  }
  &[class*='radio-group-type-'] {
    #{getClassName((radio))}.is-checked {
      color: #{getValName((color, neutral, 0))};
      border-color: #{getValName((checked, border-color))};
      background-color: #{getValName((checked, background-color))};
    }
  }
  @each $item in $types {
    &#{getClassName((radio, group, type, $item))} {
      @include set-css-val(checked,
      (color: (color, neutral, 0),
        'border-color': (color, $item),
        'background-color': (color, $item)));
    }
  }
}