.SegmentedControlWrapper {
  display: flex;
  justify-content: center;
}

.SegmentedControl {
  background: var(--card-bg);
  border-radius: $unit * 3;
  display: inline-flex;
  padding: 3px;
  position: relative;
  user-select: none;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &.fire {
    .Segment input:checked + label {
      background: $fire-bg-10;
      color: $fire-text-10;
    }

    .Segment:hover label {
      background: var(--fire-hover-bg);
      color: var(--fire-hover-text);
    }
  }

  &.water {
    .Segment input:checked + label {
      background: $water-bg-10;
      color: $water-text-10;
    }

    .Segment:hover label {
      background: var(--water-hover-bg);
      color: var(--water-hover-text);
    }
  }

  &.earth {
    .Segment input:checked + label {
      background: $earth-bg-10;
      color: $earth-text-10;
    }

    .Segment:hover label {
      background: var(--earth-hover-bg);
      color: var(--earth-hover-text);
    }
  }

  &.wind {
    .Segment input:checked + label {
      background: $wind-bg-10;
      color: $wind-text-10;
    }

    .Segment:hover label {
      background: var(--wind-hover-bg);
      color: var(--wind-hover-text);
    }
  }

  &.light {
    .Segment input:checked + label {
      background: $light-bg-10;
      color: $light-text-10;
    }

    .Segment:hover label {
      background: var(--light-hover-bg);
      color: var(--light-hover-text);
    }
  }

  &.dark {
    .Segment input:checked + label {
      background: $dark-bg-10;
      color: $dark-text-10;
    }

    .Segment:hover label {
      background: var(--dark-hover-bg);
      color: var(--dark-hover-text);
    }
  }
}