@mixin radio-box-wrap(
  $bg-color: #e2e2e2,
  $padding: $base-padding $base-padding,
  $radius: $base-btn-border-radius
) {
  width: max-content;
  display: flex;
  flex-direction: row;

  .input-radio {
    display: none;
  }

  .label-radio {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.1s ease-in-out;

    span {
      width: 1.2rem;
      height: 1.2rem;
      fill: #ffffff;
      background-color: #ffffff;
      border-radius: 50%;
      display: inline-block
    }
  }
}

.radio-box-wrap {
  @include radio-box-wrap;

  @each $key, $val in $colors {
    .input-radio {
      &:checked ~ .label-radio__#{$key}  .check{
        background-color: $val;
      }
    }

    .label-radio__#{$key} {
      border: 0.15rem solid $val;
      // background-color: ;
    }
  }
}