// Color Variables
$repo-home-header-bg-color: #1a1a1a;
$repo-home-header-nav-text-color: #f0f0f0;
$repo-home-header-nav-hover-text-color: #bfbfbf;
$repo-home-header-nav-right-text-color: #f0f0f0;
$repo-home-header-nav-right-hover-bg-color: #333;
$repo-home-header-border-color: #444;

// Header Styles
header {
  background-color: $repo-home-header-bg-color;
  padding: 0.3em 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid $repo-home-header-border-color;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 1em;
}

// Logo
.logo {
  display: flex;
  align-items: center;
  margin-right: 1em;

  img {
    height: 32px;
    width: auto;
  }
}

// Left Navbar Links
.header-left a {
  color: $repo-home-header-nav-text-color;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;

  &:hover {
    color: $repo-home-header-nav-hover-text-color;
  }
}

// Right Navbar Icons
.header-right a {
  color: $repo-home-header-nav-right-text-color;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: 50%;
  padding: 0.5em;

  img {
  width: 30px;
  height: 30px;
  }

  &:hover {
    background-color: $repo-home-header-nav-right-hover-bg-color;
  }
}

// Profile Icon
.profile-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}