.group {
  $height: 36px;

  background-color: var(--toggle-bg);
  border: 1px solid var(--toggle-stroke);
  border-radius: $height;
  display: flex;
  height: $height;
  gap: calc($unit / 4);
  padding: calc($unit / 2);
  flex-wrap: wrap;

  @include breakpoint(phone) {
    border-radius: $unit-2x;
    height: auto;
  }

  .item {
    background: var(--toggle-bg);
    border: none;
    border-radius: 18px;
    color: var(--input-secondary);
    flex-grow: 1;
    font-size: $font-regular;
    padding-top: $unit;
    padding-bottom: $unit;

    @include breakpoint(phone) {
      border-radius: $card-corner;
      padding-left: $unit-2x;
      padding-right: $unit-2x;
    }

    &.ja {
      padding-top: 6px;
      padding-bottom: 10px;
    }

    &:hover {
      cursor: pointer;
    }

    &:hover,
    &[data-state='on'] {
      background: $grey-80;
      color: $grey-15;

      &.fire {
        background: var(--fire-bg);
        color: var(--fire-text-bg);
      }

      &.water {
        background: var(--water-bg);
        color: var(--water-text-bg);
      }

      &.earth {
        background: var(--earth-bg);
        color: var(--earth-text-bg);
      }

      &.wind {
        background: var(--wind-bg);
        color: var(--wind-text-bg);
      }

      &.dark {
        background: var(--dark-bg);
        color: var(--dark-text-bg);
      }

      &.light {
        background: var(--light-bg);
        color: var(--light-text-bg);
      }
    }
  }
}