Design that moves business forward.

.availability-toggle {
  display: inline-flex;
  gap: $space-2xs;
  padding: $space-2xs;
  background: $surface-2;
  border-radius: $radius-pill;

  &__option {
    @include button-reset;
    padding: $space-xs $space-sm;
    border-radius: $radius-pill;
    font: $type-label-sm;
    color: $ink-muted;
    transition: background $motion-fast, color $motion-fast;

    &:hover { color: $ink; }

    &--active {
      background: $surface-1;
      color: $ink;
      box-shadow: $shadow-sm;
    }
  }
}

.availability-dot {
  $size: 6px;
  display: inline-block;
  width: $size;
  height: $size;
  border-radius: 50%;
  background: $brand-accent;

  &--muted { background: $border-subtle; }
}

<%# Scoped to @selected_type; each option still renders its
    own dot so switching types never requires a re-render. %>
<div class="availability-toggle" role="tablist" aria-label="Tour type">
  <% @options.each do |option| %>
    <button
      type="button"
      role="tab"
      class="availability-toggle__option
             <%= 'availability-toggle__option--active' if option.selected? %>"
      aria-selected="<%= option.selected? %>"
      data-action="click->availability-toggle#select"
      data-availability-toggle-type-param="<%= option.type %>"
    >
      <%= option.label %>
      <% if option.has_availability?(@selected_date) %>
        <span class="availability-dot"></span>
      <% else %>
        <span class="availability-dot availability-dot--muted"></span>
      <% end %>
    </button>
  <% end %>
</div>