.button-toggle {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;

  border: 1px solid;
  border-radius: 9999px;
  cursor: pointer;
  color: rgb(var(--color-smoke-30));
  border-color: rgb(var(--color-smoke-30));

  &.medium {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  &.small {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  &.selected {
    background-color: rgb(var(--color-ocean-80));
    color: rgb(var(--color-ocean-20));
    border-color: rgb(var(--color-ocean-20));
  }
}