ihk24/storybook/stories/atoms/input-checkbox-radio/input-checkbox-radio.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

input[type="checkbox"].form-control {
  width: 20px;
  padding: 0;
}

input[type="checkbox"], input[type="radio"] {
  --input-size: 20px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--theme-color-white);
  border: 1px solid var(--theme-color-primary);
  width: var(--input-size);
  height: var(--input-size);
  border-radius: var(--border-radius-xs);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.25s ease;
  margin: 0 9px 0 0;
  @include focus-visible;

  &:checked {
    background-image: url("../../assets/img/check.svg");
    background-color: var(--theme-color-primary);
  }

  &.half-checked {
    background-image: url("../../assets/img/half-check.svg");
    background-color: var(--theme-color-secondary);
  }

  ~ label {
    display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 40px);
    margin-top: 4px;
    font-size: var(--font-size-copy);
    line-height: 1.2;

    @media(max-width: 767px) {
      margin-top: 2px;
    }
  }
}

input[type="radio"] {
  --input-size: 22px;
  border-radius: 50%;
  margin: -1px 8px 0 -1px;
}