@use "tokens" as *;

.theme-selector {
  display: flex;
  background: $surface-2;
  border: 1px solid $border;
  border-radius: $radius-sm;
  gap: 2px;
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border: none;
  border-radius: $radius-sm;
  background: transparent;
  cursor: pointer;
  font-size: $fs-13;
  color: $text-3;
  transition: all 0.15s ease;

  &:hover {
    color: $text-1;
  }

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