.segmented-control {
  display: inline-flex;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: var(--spacing-1);
}

.segmented-control__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  padding: var(--spacing-xs) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--gray-800);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.segmented-control__btn:hover:not(.active) {
  background-color: var(--gray-50);
  color: var(--gray-900);
}

.segmented-control__btn:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.segmented-control__btn.active {
  color: var(--gray-900);
  background-color: var(--purple-200);
  font-weight: var(--font-weight-bold);
  border-color: var(--purple-200);
}

.segmented-control__btn_icon {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .segmented-control__btn, .segmented-control{
    max-height: var(--spacing-8);
    width: 100%;
  }
}