@import "../lib.less";
@import "../variables/components/radio.less";

.@{veui-prefix}-radio {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: @veui-radio-font-color;
  font-size: @veui-radio-font-size-m;
  line-height: @veui-radio-font-size-m * @veui-line-height-m + 1;
  cursor: pointer;

  input {
    position: absolute;
    opacity: 0;
    cursor: inherit;
  }

  &-box {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    .size(@veui-radio-size-m);
    margin-right: @veui-radio-spacing;
    border: 1px solid @veui-radio-border-color;
    background-color: @veui-radio-background-color;
    border-radius: 50%;
    font-size: @veui-font-size-m;
    .veui-transition(border-color, background-color, box-shadow);

    .@{veui-prefix}-icon {
      display: none;
    }

    &::before {
      content: "";
      margin: auto;
      .size(@veui-radio-dot-size-m);
      background-color: @veui-radio-dot-color;
      border-radius: 50%;
      transform: scale(0);
      .veui-transition(background-color, transform);
    }
  }

  & :checked + &-box {
    border-color: @veui-radio-border-color-checked;
    background-color: @veui-radio-background-color-checked;

    &::before {
      transform: scale(1);
    }
  }

  &:hover &-box {
    border-color: @veui-radio-border-color-hover;

    &::before {
      background-color: @veui-radio-dot-color-hover;
    }
  }

  &:active &-box {
    border-color: @veui-radio-border-color-active;

    &::before {
      background-color: @veui-radio-dot-color-active;
    }
  }

  & [data-focus-visible-added] + &-box {
    border-color: @veui-border-color-focus;
    background-color: @veui-radio-background-color-focus;
    .veui-focus-ring(@veui-radio-border-color-focus, @veui-radio-shadow-focus);

    &::before {
      background-color: @veui-radio-dot-color-focus;
    }
  }

  & [data-focus-visible-added]:checked + &-box {
    background-color: @veui-radio-background-color-checked-focus;
    .veui-focus-ring(
      @veui-radio-border-color-checked-focus,
      @veui-radio-shadow-focus
    );
  }

  &:hover :checked + &-box {
    border-color: @veui-radio-border-color-checked-hover;
    background-color: @veui-radio-background-color-checked-hover;
  }

  &:active :checked + &-box {
    border-color: @veui-radio-border-color-checked-active;
    background-color: @veui-radio-background-color-checked-active;
  }

  &.@{veui-prefix}-disabled {
    cursor: not-allowed;
  }

  & :disabled + &-box {
    border-color: @veui-radio-border-color-disabled;
    background-color: @veui-radio-background-color-disabled;

    &::before {
      background-color: @veui-radio-dot-color-disabled;
    }
  }

  & :checked:disabled + &-box {
    border-color: @veui-radio-border-color-checked-disabled;
    background-color: @veui-radio-background-color-checked-disabled;
  }

  &[ui~="s"] {
    font-size: @veui-radio-font-size-s;
    line-height: @veui-radio-font-size-s * @veui-line-height-m;
  }

  &[ui~="s"] &-box {
    .size(@veui-radio-size-s);

    &::before {
      .size(@veui-radio-dot-size-s);
    }
  }
  &[ui~="l"] {
    font-size: @veui-radio-font-size-l;
    line-height: @veui-radio-font-size-l * @veui-line-height-m - 2;
  }

  &[ui~="l"] &-box {
    .size(@veui-radio-size-l);

    &::before {
      .size(@veui-radio-dot-size-l);
    }
  }
}