// 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;
$repo-home-header-nav-hover-bg-color: #444;

// Header Styles
header {
  background-color: $repo-home-header-bg-color;
  padding: 1px 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;
  font-family: "Noto Sans", "Liberation Sans";
}

// 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;
	background-color: $repo-home-header-nav-hover-bg-color;
  }
}

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

  img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }
  // Profile Icon Wrapper
&.profile-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
  
	/*.header-left {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  border-radius: 50%;
	}*/
  }

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