/* Switcher Component */

.switcher {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: fit-content;
  font-size: 0.75rem;
}

.switcher-option {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: white;
  text-decoration: none;
  color: var(--text-default);
}

.switcher-option:hover {
  border-color: var(--color-primary);
}

.switcher-option.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* First option - rounded left corners */
.switcher-option:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

/* Last option - rounded right corners */
.switcher-option:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* Remove duplicate borders between options */
.switcher-option+.switcher-option {
  border-left: none;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .switcher {
    font-size: 0.6875rem;
  }

  .switcher-option {
    padding: 0.375rem 0.75rem;
    min-width: 48px;
    text-align: center;
  }

  .switcher--small {
    font-size: 0.5rem;
  }

  .switcher--small .switcher-option {
    padding: 0.1875rem 0.375rem;
    min-width: 0;
    font-size: 0.4375rem;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .switcher {
    font-size: 0.625rem;
  }

  .switcher-option {
    padding: 0.3125rem 0.625rem;
    min-width: 44px;
  }

  .switcher--small {
    font-size: 0.4375rem;
  }

  .switcher--small .switcher-option {
    padding: 0.125rem 0.3125rem;
    min-width: 0;
    font-size: 0.4375rem;
  }
}

/* Small variant */
.switcher--small {
  font-size: 0.4375rem;
}

.switcher--small .switcher-option {
  padding: 0.25rem 0.5rem;
  min-width: 0;
  font-size: 0.4375rem;
}

.switcher--small .switcher-option:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.switcher--small .switcher-option:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}