$userPanel-height: 50px;

.userPanel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: $userPanel-height;

  @at-root #{&}__avatar {
    height: 100%;
    border-radius: 3px;
  }

  @at-root #{&}__info {
    font-size: 16px;
    font-weight: bold;
    margin-left: 15px;

    a {
      color: $color-primary;
      text-decoration: none;
      outline: none;
      font-size: 20px;

      :link,
      :visited,
      :focus {
        color: $color-primary;
        text-decoration: none;
        outline: none;
        font-size: 20px;
      }

      :hover,
      :active {
        text-decoration: underline;
      }
    }
  }

  @at-root #{&}__editBtn {
    height: 15px;
    margin-left: 2px;
    cursor: pointer;

    @at-root #{&}:hover {
      filter: brightness(-50%);
    }
  }

  @at-root #{&}__description {
    margin-top: 3px;
  }

  @at-root #{&}__configureBtn {
    height: 100%;
    width: 195px;
    margin-left: auto; // flush btn to the right
    line-height: $userPanel-height;
  }
}

$userPanel-height: 50px;

.userPanel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: $userPanel-height;

  @at-root #{&}__avatar {
    height: 100%;
    border-radius: 3px;
  }

  @at-root #{&}__info {
    font-size: 16px;
    font-weight: bold;
    margin-left: 15px;

    a {
      color: $color-primary;
      text-decoration: none;
      outline: none;
      font-size: 20px;

      :link,
      :visited,
      :focus {
        color: $color-primary;
        text-decoration: none;
        outline: none;
        font-size: 20px;
      }

      :hover,
      :active {
        text-decoration: underline;
      }
    }
  }

  @at-root #{&}__editBtn {
    height: 15px;
    margin-left: 2px;
    cursor: pointer;

    @at-root #{&}:hover {
      // filter for $color-primary (navy-blue)
      filter: contrast(0) sepia(100%) hue-rotate(170deg) brightness(0.7) saturate(5);
    }
  }

  @at-root #{&}__description {
    margin-top: 3px;
  }

  @at-root #{&}__configureBtn {
    height: 100%;
    width: 195px;
    margin-left: auto; // flush btn to the right
    line-height: $userPanel-height;
  }
}

Fix CSS filter color for hovering
userPanel: Fix CSS filter color for hovering
