@use "sass:map";
@use "../../../styles/tools/generate";

@mixin radiocheck-states($config, $display-selector: "") {
  + #{$display-selector} {
    @include generate.css-map($config, "default");
  }

  &:checked + #{$display-selector} {
    background-position: center center;
    @include generate.css-map($config, "checked");
  }

  &:disabled + #{$display-selector} {
    @include generate.css-map($config, "disabled");
  }

  &:disabled:checked + #{$display-selector} {
    @include generate.css-map($config, "disabled-checked");
  }

  &.is-invalid + #{$display-selector} {
    @include generate.css-map($config, "invalid");
  }

  &:focus-visible + #{$display-selector} {
    @include generate.css-map($config, "focus");
  }

  &:checked.is-invalid + #{$display-selector} {
    @include generate.css-map($config, "invalid-checked");
  }
}

@mixin radiocheck-input() {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

@mixin radiocheck-size($size, $config) {
  width: map.get($config, $size);
  height: map.get($config, $size);
}