@use "sass:math";
@use "sass:map";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../../util/scss/deep-merge.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "./Field.scss" as *;

@mixin cx-radio(
   $name: "radio",
   $state-style-map: $cx-radio-state-style-map,
   $size: $cx-default-radio-size,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);

   $padding: cx-get-state-rule($state-style-map, default, padding);
   $border-width: cx-get-state-rule($state-style-map, default, border-width);

   $outer-styles: cx-deep-map-merge(
      $state-style-map,
      (
         default: (
            border-width: cx-top($border-width) 0 cx-bottom($border-width) 0,
         ),
      )
   );

   .#{$block}#{$name} {
      min-width: $size;
      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
   }

   .#{$element}#{$name}-radio {
      padding: 0;
      margin: 0 !important;
      width: $size;
      height: $size;
      top: calc(50% - #{cx-multiply($size, 0.5)});
      left: 0;
      display: inline-block;
      position: absolute;
      -webkit-backface-visibility: hidden;
      outline: none;

      &::-moz-focus-outer {
         border: 0;
      }

      &:focus {
         box-shadow: 0 0 2px 2px rgba(77, 144, 254, 0.8);
         background: transparent;
         border-radius: 50%;
         outline: none;
      }
   }

   .#{$element}#{$name}-text {
      display: inline-block;
      margin-left: $size;
      user-select: none;

      .#{$state}disabled > & {
         opacity: 0.5;
      }
   }

   //non-native implementation
   .#{$element}#{$name}-input {
      width: $size;
      height: $size;
      top: calc(50% - #{cx-multiply($size, 0.5)});
      left: 0;
      display: inline-block;
      position: absolute;
      //overflow: hidden;
      opacity: 1;

      @include cxe-field-input(
         $besm,
         $state-style-map,
         $input: false,
         $overrides: (
            default: (
               border-radius: 50%,
               padding: 0,
               margin: 0 !important,
            )
         )
      );

      &.#{$state}checked {
         @include cx-add-state-rules($state-style-map, checked);

         &:focus {
            @include cx-add-state-rules($state-style-map, checked-focus);
         }
         &:hover {
            @include cx-add-state-rules($state-style-map, checked-hover);
         }

         .#{$state}disabled > & {
            @include cx-add-state-rules($state-style-map, disabled-checked);
         }
      }

      &:before {
         content: " ";
         width: calc(100% - 6px);
         height: calc(100% - 6px);
         visibility: hidden;
         position: absolute;
         margin: 3px;
         box-sizing: border-box;
         background-color: currentColor;
         border-radius: 50%;
      }

      &.#{$state}checked:before {
         visibility: visible;
      }
   }
}

@if (cx-should-include("cx/widgets/Radio")) {
   @include cx-radio();
}