*,
*:before,
*:after {
  box-sizing: inherit;
}

:root {
  --unselected-linedir-color: #ff4b1f;
  --selected-linedir-color: #eef400;
  --box-background-color: rgb(144, 144, 144);
  /* --group-shadow1: #d1d9e6;
  --group-shadow2: #ffffff;
  --indicator-shadow: #d1d9e6; */
}


body {
  /* height: 100vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--box-background-color);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
}

section {
  position: relative;
  /* width: 180px; */
  display: inline-block;
  background: var(--box-background-color);
  color: #000000;
  border-radius: 0.4em;
  padding: 0.2em;
  margin: 0;
  /* accent-color: hotpink; */
  user-select: none;
}


.radiogroup {
  /* padding: 48px 64px; */
  /* padding: 16px 22px; */
  /* padding: 0.2em 0.2em; */
  /* border-radius: 16px; */
  border-radius: 4px;
  background: var(--box-background-color);
  /* box-shadow:
    2px 2px 2px 0px var(--group-shadow1) inset,
    -2px -2px 2px 0px var(--group-shadow2) inset; */
  }

.wrapper {
  /* margin: 8px 0; */
  margin: 4px 0;
}

.state {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 1e-5;
  pointer-events: none;
}

.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  /* color: #394a56; */
  color: #000000;
  /* background-color: #d62710; */
}

.text {
  /* margin-left: 16px; */
  margin-left: 0.2em;
  margin-right: 0.2em;
  /* opacity: .6; */
  transition: opacity .2s linear, transform .2s ease-out;
  /* background-color: #EEF400; */
  background-color: var(--unselected-linedir-color);
  padding: 4px 6px;
  border-radius: 3px;
}

.state:checked ~ .label .text {
  /* transform: translate3d(6px, 0, 0); */
  /* transform: scale3d(1.2, 1.2, 1); */
  /* background-color: #e91a1a; */
  background-color: var(--selected-linedir-color);
  /* font-weight: bold; */
}

.indicator {
  position: relative;
  border-radius: 50%;
  /* height: 30px;
  width: 30px; */
  height: 16px;
  width: 16px;
  box-shadow:
    -8px -4px 8px 0px var(--group-shadow2),
    8px 4px 12px 0px var(--indicator-shadow);
  overflow: hidden;
}

.indicator::before,
.indicator::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
  border-radius: 50%;
}

.indicator::before {
  box-shadow:
    -4px -2px 4px 0px var(--indicator-shadow),
    4px 2px 8px 0px var(--group-shadow2);
}

.indicator::after {
  background-color: var(--box-background-color);
  /* background-color: #d62710; */
  box-shadow:
    -4px -2px 4px 0px var(--group-shadow2),
    4px 2px 8px 0px var(--indicator-shadow);
  transform: scale3d(1, 1, 1);
  transition: opacity .25s ease-in-out, transform .25s ease-in-out;
}

.state:checked ~ .label .indicator::after {
  transform: scale3d(.975, .975, 1) translate3d(0, 10%, 0);
  /* transform: scale3d(.5, .5, 1) translate3d(0, 10%, 0); */
  opacity: 0;
}


/* .state:focus ~ .label .text {
  transform: translate3d(8px, 0, 0);
  opacity: 1;
}

.label:hover .text {
  opacity: 1;
} */