@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;

.ui-radio {
  $self: &;

  --size: 20px;

  display: flex;

  &__wrapper {
    display: inline-flex;
    position: relative;
  }

  &__input {
    width: 0;
    height: 0;
    opacity: 0;
    cursor: pointer;
    z-index: -1;
    margin: 0;
  }

  &__inner {
    --border-color: var(--radio-border-color);
    --border-width: 1px;

    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    outline: var(--border-width) solid var(--border-color);
    outline-offset: calc(var(--border-width) * -1);
    font-size: 10px;
    cursor: pointer;
    background-clip: content-box;
    padding: 5px;
    transition: .2s ease-out;
    transition-property: outline-color, background-color;

    #{$self}__input:focus-visible + &,
    #{$self}:not(.is-disabled) &:hover {
      --border-width: 2px;
    }

    #{$self}.is-checked & {
      background-color: var(--radio-checked-background);
    }

    #{$self}.is-disabled & {
      --border-color: var(--radio-disabled-border-color);

      cursor: not-allowed;
    }

    #{$self}.is-disabled.is-checked & {
      background-color: var(--radio-disabled-checked-background);
    }
  }

  &__label {
    @include txt-i-m;

    margin-left: 8px;
    margin-top: 1px;
    color: var(--radio-label-color);

    #{$self}.is-disabled & {
      color: var(--radio-label-disabled-color);
      cursor: not-allowed;
    }
  }

  @include element-variant('radio', '', (
          'border-color': $clr-grey-400,
          'checked-background': $clr-grey-400,
          'disabled-border-color': $clr-grey-300,
          'disabled-checked-background': $clr-grey-300,
          'label-color': $clr-black,
          'label-disabled-color': $clr-grey-400
  ))
}