.wrapper {
  border-radius: 2px;
  padding: 4px;
  background-color: var(--color-background);
  box-shadow: inset 0 0 0 1px var(--color-border-dark);
  transition: .3s ease box-shadow;
  display: flex;
  gap: 4px;
}

.control {
  composes: reset from '../../reset.module.css';

  color: var(--color-text);
  background-color: transparent;

  padding: 6px 12px;
  flex: auto;
  display: flex;
  gap: 8px;
  justify-content: center;
  border-radius: 2px;
  transition: .3s ease all;
  cursor: pointer;
  text-decoration: none;
}

.control:hover {
  background-color: var(--color-background-light);
}

.control:focus-visible {
  box-shadow: var(--shadow-focus);
}

.controlActive {
  composes: control;
}

.controlActive, .control:has(> .radio:checked) {
  background-color: var(--color-background-light);
  box-shadow: inset 0 0 0 1px var(--color-border-dark);
}

.radio {
  display: none;
}