@use '../styles/variables' as *;

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: $radius-base;
  border: 1px solid var(--clr-border, #{$color-border});
  background: var(--clr-surface, #{$color-surface});
  color: var(--clr-text-secondary, #{$color-text-secondary});
  cursor: pointer;
  transition: background $transition-fast, color $transition-fast, border-color $transition-fast;

  &:hover {
    background: var(--clr-surface-raised, #{$gray-100});
    color: var(--clr-text, #{$color-text-primary});
  }
}
