.button-group {
  display: flex;
  gap: 0;

  & .button {
    flex: 1;
  }

  & .button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & .button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  & .button:only-child {
    border-radius: var(--half-border-radius-width, 8px);
  }
}

/* Radio-button style option group */
.button-group__option {
  display: flex;
  cursor: pointer;

  & input[type="radio"] { display: none; }

  & span {
    display: block;
    padding: 0.4rem 1rem;
    border: 1px solid #ddd;
    border-right-width: 0;
    font-size: 0.875rem;
    white-space: nowrap;
    background: #fff;
    color: var(--secondary-text-color, #666);
    transition: background 0.1s, color 0.1s;
  }

  &:first-child span { border-radius: 0.5rem 0 0 0.5rem; }
  &:last-child  span { border-right-width: 1px; border-radius: 0 0.5rem 0.5rem 0; }

  &:has(input:checked) span {
    background: var(--color-primary, #ff2800);
    border-color: var(--color-primary, #ff2800);
    color: #fff;
  }
}

/* Tide offset stepper */
.tide-offset-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  &__btn {
    padding: 0.35rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    font-size: 0.875rem;

    &:hover { background: #f5f5f5; }
  }

  &__value {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
  }
}

.tide-picker-preview {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--secondary-text-color, #666);
  min-height: 1.2em;
}

[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button-group__option span {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
  }

  .button-group__option:has(input:checked) span {
    background: var(--color-primary, #ff2800);
    border-color: var(--color-primary, #ff2800);
    color: #fff;
  }

  .tide-offset-stepper__btn {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;

    &:hover { background: #273548; }
  }
}

.button-group--grey {
  & .button {
    background-color: var(--color-grey-light, #f5f5f5);
    border-color: var(--color-grey-light, #f5f5f5);
    /* color: var(--secondary-text-color, #555); */
    color: var(--secondary-text-color, #888);
  }

  & .button:hover {
    background-color: color-mix(in oklab, var(--color-grey-light, #f5f5f5), #000 8%);
    border-color: color-mix(in oklab, var(--color-grey-light, #f5f5f5), #000 8%);
    color: var(--secondary-text-color, #888);
  }
}