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

  @include breakpoint(phone) {
    width: 100%;
  }
}

.SegmentedControl {
  // 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);

  @include breakpoint(phone) {
    background: var(--card-bg);
    border-radius: 100px;
  }

  &.Blended {
    background: var(--input-bound-bg);
    border-radius: $full-corner;

    .Segment input:checked + label {
      background: var(--card-bg);
    }
  }

  &.fire {
    .Segment input:checked + label {
      background: var(--fire-bg);
      color: var(--fire-text);
    }

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

  &.water {
    .Segment input:checked + label {
      background: var(--water-bg);
      color: var(--water-text);
    }

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

  &.earth {
    .Segment input:checked + label {
      background: var(--earth-bg);
      color: var(--earth-text);
    }

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

  &.wind {
    .Segment input:checked + label {
      background: var(--wind-bg);
      color: var(--wind-text);
    }

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

  &.light {
    .Segment input:checked + label {
      background: var(--light-bg);
      color: var(--light-text);
    }

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

  &.dark {
    .Segment input:checked + label {
      background: var(--dark-bg);
      color: var(--dark-text);
    }

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