.base {
  width: var(--space-4);
  height: var(--space-4);
  margin: 3px 0 0;
  border-width: 1px;
  border-style: solid;
  border-color: #00000031;
  border-radius: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.checked {
  color: var(--accent-contrast);
  border-color: var(--accent-indicator);
  background-color: var(--accent-indicator);
  &::after {
    position: relative;
    display: block;
    width: 93%;
    height: 93%;
    content: '';
    background-image: url('../../../../assets/icons/checkmark.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    inset-block-start: .5px;
    inset-inline-start: .5px;
  }
}
