div.outer {
  align-items:    center;
  border-radius:  10px;
  border:         1px solid var(--color-aclaction-deny);
  cursor:         pointer;
  display:        flex;
  flex-direction: row;
  height:         20px;
  position:       relative;
  transition:     border-color 0.1s linear;
  user-select:    none;
  width:          min-content;
}

div.inner {
  background:    var(--color-aclaction-deny);
  border-radius: 8px;
  height:        calc(100% - 2px);
  left:          1px;
  position:      absolute;
  top:           1px;
  transition:    left 0.1s linear, background 0.1s linear;
  width:         calc(50% - 2px);
  z-index:       1;
}

div.outer p {
  color:       white;
  font-family: 'Trebuchet MS';
  font-size:   8pt;
  text-align:  center;
  transition:  color 0.1s linear;
  width:       50px;
  z-index:     2;
}

input:checked + div.outer {
  border-color: var(--color-aclaction-allow);
}

input:checked + div.outer > div.inner {
  background: var(--color-aclaction-allow);
  left:       calc(50% + 1px);
}

input:checked + div.outer p:nth-child(2) {
    color: black;
}