@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(radio) {
  color: getCssVar("color", "text-1");
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  outline: none;
  font-size: getCssVar("font-size", "medium");
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
  gap: 8px;
  &:hover {
    @include be(radio, inner) {
      border-color: getCssVar("color", "primary-6");
    }
  }
  @include e(input) {
    opacity: 0;
    outline: none;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
  @include e(inner) {
    border: 1px solid getCssVar("color", "fill-3");
    border-radius: getCssVar("radius", "circle");
    width: 14px;
    height: 14px;
    background-color: getCssVar("color", "bg-2");
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    transition: all 0.3s;
    &::after {
      width: 4px;
      height: 4px;
      border-radius: getCssVar("radius", "circle");
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.15s getCssVar("bezier", "1");
    }
  }

  @include when(checked) {
    @include be(radio, inner) {
      border-color: getCssVar("color", "primary-6");
      background: getCssVar("color", "primary-6");
      &::after {
        background-color: #fff;
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }

  @include when(button) {
    height: 100%;
    @include be(radio, inner) {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      opacity: 0;
    }

    @include be(radio, label) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      line-height: getCssVar("line-height", "medium");
      border-radius: calc(getCssVar("radius", "medium") - 1px);
      &:hover {
        background-color: getCssVar("color", "bg-3");
      }
    }

    @include this-is(checked) {
      @include be(radio, label) {
        color: getCssVar("color", "primary-6");
        background-color: getCssVar("color", "bg-3");
      }
    }
  }
}

@include b(radio-group) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  @include when(vertical) {
    flex-direction: column;
  }

  @include when(button) {
    background-color: getCssVar("color", "fill-2");
    padding: 3px;
    height: getCssVar("size", "medium");
    gap: 3px;
    border-radius: getCssVar("radius", "medium");
  }
}